cssing Архив » Какие-то сложные игры c флоатами

Какие-то сложные игры c флоатами

XHTML/CSS

По-другому и правда не назовешь. Ах, эта обманчивая внешняя простота:

Всё красиво

Всё просто

Скриншот нашей цели видно выше. Казалось бы, очевидным кодом будет:

1. <dl>
2. <dt>42</dt>
3. <dd>
4. <strong>Ответ на Вопрос</strong>
5. <a href="#">Купить</a>
6. </dd>
7. </dl>

Добавим такой CSS:

1. dl,dt,dd{
2. float:left;/*флоатим каждый из блоков DL, и оба подблока DT DD*/
3. }
4. dd strong{
5. display:block;/*чтобы название товара и кнопка «купить» были на разных строках*/
6. }

Добавив еще шрифтов и цветов получим это:

Ничто не предвещало беды

Oh my… not again =(

Однако, вот что происходит при ресайзе окна:

Так выглядит в ИЕ

Как видите, блоки в панике, и не могут найти себе места. Не хватает только знаменитого крика «А-а-а-а-а».
Признаюсь, после получаса тщетных усилий чувство паники овладело и мной. Я решил обратиться к умным ребятам в WSG.

WSG to the rescue!

Одно из замечательнейших онлайн сообществ на этой планетке. Веселые австралийцы там спорят о том «как делать сайты для слепых», «каким HTML лучше размечать логотип», и «что такое эти веб-стандарты в честь которых назвали наше сообщество». Но там всегда помогают умным CSS-советом.

Калифорнийский француз, многодетный отец (2!) и вообще положительный человек Thierry, как настоящий воин, не смог пройти мимо моей трудной задачи, и придумал своё решение. Все оказалось до постыдного простым, блоки нужно сделать inline, и задать white-space:nowrap;
Вот такой код нужно было добавить к первоначальному, чтобы все заработало:

1. /*Стили только для IE*/
2. dt,dd{float:none;} /*убираем флоаты*/
3. dt,dd{display:inline;zoom:1;} /*делаем DT и DD инлайновыми, но zoom наделяет их возможностью padding и другими блочными свойствами*/
4. dl{white-space:nowrap;}/*заставляем DT и DD быть на одной строке*/

Попутно, Тьерри поделился забавным ИЕ хаком (из разряда грязных):

1. dt,dd,{float:none;}/*лишняя запятая*/

Вся строка будет понята только IE6-7.
Всегда полезно общаться с иностранными коллегами.
Спасибо Thierry! Вот подправленный и теперь уже рабочий пример.

Идея и код очень простые, но именно потому могут кому-то пригодиться.

Еще об этом

Изначально я пытался решить проблему CSS-таблицами, но к сожалению мне не удавалось сэмулировать это поведение для ИЕ:

1. dl{display:table}
2. dt, dd{display:table-cell}

Это чтобы они вообще ни при каких обстоятельствах не переносились. При сильном сжатии окна, во всех предыдущих примерах, DD таки соскакивал вниз. При таком CSS, не соскакивает. Пример.

И еще вариант!

Как круто и гениально посоветовал в комментариях Влад, все это можно было бы решить вообще одной строкой для ИЕ:

1. dt,dd{clear:right}

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

В конце

Хотя проблема специфична, она связана с «флоатами в одну строку». Что, вобщем, встречается нередко. Никогда не знаешь где может пригодиться inline или clear.
Интересной проблема мне показалась еще и из-за внешней простоты дизайна.

• Первый глючный пример
• Пример от Тьерри с display:inline
• Третий пример с table-cell
• Пример от vladfrandom c clear:right

Буду рад если поделитесь своими мыслями по теме! Или задачами =)

XHTML/CSS