Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Prorok256
1 / 1 / 1
Регистрация: 23.11.2015
Сообщений: 90
#1

Сделать обтекание текстом блока read more

16.11.2016, 22:23. Просмотров 327. Ответов 3
Метки нет (Все метки)

Всем привет! Можете подсказать, как блок read more сделать внизу и чтобы текст обтекал его?
HTML:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="news">
            <div class="titls">
                <h2><span>News</span></h2>
            </div>
            <div class="bl_n">
                <div class="data"><span>22</span>december 2013</div>
                <div class="new">
                <div class="button">Read more</div>
                <p><a><u>Vestibulum id ligula porta felis euismod</u></a> semper. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem 
                 Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem</p>
                </div>
            </div>
                <div class="bl_n">
                <div class="data"><span>22</span>december 2013</div>
                <div class="new">
                <div class="button">Read more</div>
                <a><u>Vestibulum id ligula porta felis euismod</u></a> semper. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem 
                 Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem
                </div>
            </div>
                <div class="bl_n">
                <div class="data"><span>22</span>december 2013</div>
                <div class="new">
                <div class="button">Read more</div>
                <a><u>Vestibulum id ligula porta felis euismod</u></a> semper. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem 
                 Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem
                </div>
            </div>
        </div>
        </div>
CSS:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.news{
    float:left;
    width:573px;
}
 
.bl_n{
    height:92px;
    position:relative;
}
 
.data{
    width:16.2%;
    height:92px;
    background:#f8f8f8;
    float:left;
    margin:1px 0;
    border-right: 1px solid #3f8cdb;
}
 
.new{
    width:83.7%;
    height:92px;
    font-family: OpenSansSemibold,sans-serif;
    color: #5a5a5a;
    font-size:11px;
    line-height:1.5;
    background:#f8f8f8; 
    float:left;
    margin:1px 0;
    padding:10px 0px 15px 20px;
}
 
.new a{
    font-family: OpenSansSemibold,sans-serif;
    color:#1e62a7;
    font-size:12px;
    font-weight:bold;
}
 
.new p{
    clear:left;
}
 
.button{
    position:relative;
    bottom:9px;
    right:0;
    text-align:center;
    width:24%;
    height:33px;
    background:#001e3c;
    color:#fff;
    float:right;
    padding:10px 0 0;
}
Что я не так делаю?

 Комментарий модератора 
Используйте соответствующие теги в редакторе для форматирования кода!

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
16.11.2016, 22:23
Ответы с готовыми решениями:

Обтекание блока текстом
Знаю, что таких тем масса на форуме! Но у меня немного особенный случай. Легче...

Сделать обтекание текстом заглавной буквы
помогите сделать обтекание текстом заглавной буквы. картинку вышлю, если нужно...

Обтекание слайдера текстом как сделать?
Нужно что бы слайдер обтекал текст как сделать с помощью сss html только сайт...

как сделать рамку вокруг блока с фото и текстом?
подскажите плагин или как подробно опишите сделать чтобы в рамке, цветной,...

Обтекание картинки текстом
Нужно сделать как в первом варианте, у меня получается максимум, как во...

3
t1m0n
624 / 402 / 27
Регистрация: 03.11.2009
Сообщений: 1,836
17.11.2016, 01:34 #2
в блоке .new

CSS
1
2
.new {
  position: relative; }
а в .button

CSS
1
2
3
4
.button {
  
  position: absolute; 
}

зачем в h2 вкладывать span?

зачем делать
HTML5
1
<a><u>Vestibulum id ligula porta felis euismod</u></a>
так, если вы зададите
HTML5
1
<a href='#same_link'>
и подчеркивание будет
1
Prorok256
1 / 1 / 1
Регистрация: 23.11.2015
Сообщений: 90
17.11.2016, 09:00  [ТС] #3
с <a> согласен тупанул. Делал ночью. Засыпал. Про href забыл совсем. А span я вставлял потому что только так у меня получилось только так вставить пунктирные линии до и после заголовка.

вот код.

html:
HTML5
1
2
3
<div class="titls">
    <h2><span>Best features</span></h2>
</div>
Css:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.titls h2 {
    font-family: SignikaNegativeRegular,sans-serif;
    color: #093059;
    font-size:16px;
    font-weight:bold;
    text-transform:uppercase;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 40px;
    margin-bottom: 35px;
}
 
.titls h2 > span {
    display: inline-block;
    margin: 0 .4em;
}
 
.titls h2 > span:before,
.titls h2 > span:after {
    content: '';
    position: absolute;
    width: 100%;
    border-top: 1px dashed #d1d1d1;
    margin-top: .4em;
}
 
.titls h2 > span:before {
    margin-left: -102%;
}
 
.titls h2 > span:after {
    margin-left: 2%;
}
Если можно сделать как то иначе буду признателен и благодарен новым знаниям.

Добавлено через 12 минут
И такой вопрос. Блок у меня разместить получилось. Как сделать чтобы текст его обтекал? Он появляется поверх текста

 Комментарий модератора 

Используйте соответствующие теги в редакторе для форматирования кода! Последнее предупреждение!
0
t1m0n
624 / 402 / 27
Регистрация: 03.11.2009
Сообщений: 1,836
21.11.2016, 04:33 #4
добавьте картинку как весь этот блок должен выглядить
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.11.2016, 04:33

Обтекание картинки текстом
Здравствуйте, у меня почему-то картинка не обтекается текстом. Помогите решить...

Обтекание картинки текстом
как убрать отступ под картинкой?

Обтекание картинки текстом
Доброе утро. Есть таблица 3 на 3. В каждой ячейки по картинке и текст. Нужно...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru