Алена в рубрику HTML и CSS

Вопрос: Как в строку вставить блочный элемент?

Нужно сверстать название новости и тут же через несколько пробелов вставить блок с датой. То есть, блок с датой должен находиться сразу после окончания текста новости в этой же строке, и в случае переноса строки - блок тоже переносится (полностью, а не по частям). Ширина строки не фиксирована.
Вот ссылка на то как это должно выглядеть должно выглядеть

Я сначала сделала два дива, с float:left, один с не фиксированной длинной (в котором название новости)второй с фиксированной (с датой). В принципе, большинство браузеров адекватно отобразили верстку, кроме всеми любимых ИЕ6 и ИЕ7, в них все развалилось - вариант не подошел.
Потом пробовала блок с датой сделать через span, но в этом случае он является строчным элементом и следовательно разрывается при переносе, что противоречит макету.

Есть какие-нибудь еще варианты?

Задайте свой вопрос

Если у вас есть вопрос по разработке или дизайну сайтов, вы можете задать его на Временно.нет и тысячи наших читателей помогут вам найти на него ответ.

Задать свой вопрос

Расскажите друзьям

Ответы на вопрос — 5

Evgenij
Чтобы span не разрывался, вам следует указать в стилях
.date
{
    white-space:nowrap;
}
Алена
Спасибо.
Там на самом деле достаточно поставить
span .data {
display:inline-block;
}
инлайн блок работает во всех браузерах. Паддингами отрегулировать ширину блока - вот и все. Переносится полностью блоком.
#
Алена
Саша Кириллов
display:inline-block не поддерживается ие6 и ие7, для них нужно будет отдельно указать display:inline, поэтому решение с white-space:nowrap;
в данном случае более рабочее
IE6
Для изначально инлайновых элементов (в т.ч. ) inline-block в IE работает без дополнительных пинков.
#
IE6
Алена
Ну в общем у меня inline-block сработал везде
#
Алена

Новый ответ

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler