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

29 Aug, 2008

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

конечный результатВсё красиво

Всё просто

Скриншот нашей цели видно выше. Казалось бы, очевидным кодом будет:
  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. Интересной проблема мне показалась еще и из-за внешней простоты дизайна. Буду рад если поделитесь своими мыслями по теме! Или задачами =)

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

1.YoYurec | 29 Aug, 2008
ну вы, ребята, и маньяки!!! одним словом - изящно. >Всегда полезно общаться с иностранными коллегами. приятно также, что доносят знания и дополняют их наши коллеги :) ещё раз спсб!
2.vladfrandom | 29 Aug, 2008
вместо всей этой красоты для IE хватило бы: /*Стили только для IE*/ dt,dd{clear:right;}
3.akella | 29 Aug, 2008
Круто! Спасибо! И правда работает, не знаешь почему? =) Или уже сталкивался с такой задачей и опытным путем..?
4.vladfrandom | 29 Aug, 2008
опыт... пригодилость для карусельного слайдшоу. а вот почему... it's IE, be ready, here begins the strange miracles кстати Тьерри дал невалидный вариант.
5.akella | 29 Aug, 2008
Кое-как мне удалось найти в этом логику "уж если ты clear:right; то не смей сползать под float:left!" Я так и написал "грязный", я не фанат ЦСС-валидности, я практик работавший в стрессовых ситуациях =) Просто одна из альтернатив для _ и $
6.Vii | 29 Aug, 2008
Немножко не в тему, но для IE ведь еще можно писать: *float:none; (если я не ошибаюсь, это "чудо" понимают и 6-ой, и 7-ой)
7.vladfrandom | 29 Aug, 2008
скорее такое поведение имеет общие корни с эффектом height:1%; для родителя флоаченых элементов или vertcal-align:top; для вертикального списка с блочніми линками. imho естественно
8.vladfrandom | 29 Aug, 2008
и, да, я маньяк валидности кода. хотя и работаю на верстальном конвейере =)
9.Олег | 30 Aug, 2008
> "dt,dd,{float:none;}/*лишняя запятая*/" а смысл хака, есть универсальный, можно просто добавить знак $ и это поймут только ИЕ, например: $dt,$dd {float:none;}
10.akella | 30 Aug, 2008
Олег, то что вы написали не работает. Это не поймет ни один броузер. Правильно dt,dd{$float:none}.
11.Deff | 31 Aug, 2008
Или я что-то пропустил, или пример Тиерри в опере 9.5 таки сползает. И не при минимальном размере окна. А вот пример Влада более стабилен
12.xain | 31 Aug, 2008
Юрий, а почему ты не выкладываеш свои кросс-посты на www.habrahabr.ru - я думаю людям будет очень приятно почитать твои статьи, сам читаю с удовольствием.
13.akella | 31 Aug, 2008
Мне не нравится идея дублирования контента, а выкладывать там только ссылку сюда это какой-то чуждый мне пиар.
14.Евгений | 01 Sep, 2008
Отличный пример — спасибо! Впрочем как всегда… =)
15.Nit | 03 Sep, 2008
Мне понравилось, классный пример, я уже и применить как придумал
16.0Т0 | 03 Sep, 2008
Юра, простите, что не по теме. Хочу узнать ваше мнение относительно данной верстки: http://oto-studio.com/lenta/ Любопытно. Спасибо.
17.Genn | 04 Sep, 2008
Очень интересный пост. Автор показался раскрыть со всех сторон тему. Мне кажется, что ему это удалось. Раньше зависал на других сайтах, но узнал об этом.
18.Genn | 04 Sep, 2008
Кстати, проверь в Гуглохроме на всякий случай. Мне кажется, что эта компания энтузиастов придумала-таки, как подложить всем свиней ;)
19.akella | 04 Sep, 2008
@OTO: табличная верстка. Для пользователя, почти никакой разницы, кроме слегка дерганой загрузки, как всегда с таблицами. С технической точки зрения — много необязательных таблиц, как следствие неоправданные усложнения читабельности и сложности кода. Так же обязательно нужно начать использовать таг P. В остальном все клево. @Genn: да нет, таки нет, по крайней мере в этом случае, обычный webkit. Просто не последняя версия.
20.hitalex | 05 Sep, 2008
Думаю все-таки придумано очень даже интересно. Правда с другой стороны это искусство ради искусства.
21.0Т0 | 05 Sep, 2008
Благодарю.
22.cross | 09 Sep, 2008
Ох ничего себе :) Подобных манимуляций с dd тегами еще не видел )
23.Дизель генератор | 15 Sep, 2008
Интересная игра с тэгами... СПАСИБО!
24.Kelly | 16 Sep, 2008
А по-моему, ничего особенного от ресайзинга и не произошло. Зря автор так сильно кричал Oh my god!
25.Роман | 02 Oct, 2008
Интересно вот что: в вашем примере каждый блок является отдельным Definition list. Что не логично и "несемантично". А логично было бы, мне кажется, заключить ВСЕ элементы в один DL. Правда в таком случае вам уже не удастся не использовать обтекание (float) для DT и DD.
26.akella | 02 Oct, 2008
@Роман: в спецификации вообще говорится что DT должен быть один внутри DL ;)
27.Роман | 03 Oct, 2008
Вы не могли укать где именно так говорится? http://www.w3.org/TR/html401/struct/lists.html#h-10.3
28.akella | 04 Oct, 2008
Да, это я что-то сам придумал, прошу прощения =) Кажется где-то в WSG проскакивало, а контекст забыл. Наверное неверно отложилось. =( В любом случае мне кажется логичным оборачивать так =) да и удобнее стилизовать, вы правы. ЗЫ: кстати метод вполне сошел бы, только не удалось бы контролировать, чтобы дата и текст к ней относящийся был на одной строке =(
29.Андрей | 13 Nov, 2008
Отличный пост, много новичков спрашивают именно подобные вопросы про слои. Помню как сам искал ответы на вёрстку и похожие темы нигде особо не были раскрыты. Ставлю ссылку на пост :)
30.cssing :: Архив :: CSSing 2008 | 30 Dec, 2008
[...] ? акие-то сложные игры c флоатами — по-другому и правда не скажешь. Необычный clear’инг [...]