3 июля, 2005

display:table

До недавнего времени считал это свойство практически бесполезным. Подходящим лишь для игр с CSS в топ-броузерах. А на самом деле это свойство решило проблему нерешаемую практически никаким другим способом.

Проблема

К примеру есть на сайте набор вот таких блоков: картинка + заголовок + выдержка.
В коде соответственно имеем:

  1. <div class=”post”>
  2. <img src=”./i/image.jpg” alt=”" />
  3. <h2><a href=”#”>Heading</a></h2>
  4. <p>text tex text text text text ext text text textt</p>
  5. </div>

Cуть проблемы в том что заказчик хочет картинку с одной стороны блока и текст с другой. И это при том что картинка может быть какого угодно размера.
Итак первое и очевидное сделать float:left; картинке. Выйдет такое.

FF

Some kind of Heading

Some text. Dean then started to talk about the power of the enclosure element in RSS 2.0. What is great about it is that it enables one to syndicate all sorts of digital content. One can syndicate video, music, calen it is that it enables one to syndicate all sorts of digital content. One can syndicate video, music, calen Some text. Dean then started to talk about the power of the enclosure element in RSS 2.0.

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

Вот эту ситуацию я и считал практически нерешабельной в “стандартах” (без таблиц).

Решение

А решение оказалось таким же простым как и неочевидным. (спасибо Gunlaug Sørtun)
Вот недостающий кусок CSS: (для выдержки что загибалась под картинку)

  1. div.post p{
  2. display: table;
  3. _height: 0;/*это для ИЕ5-6*/
  4. zoom: 1;/*это для ИЕ7*/
  5. }

В результате вышеуказанный пример превращается в такой

FF

Some kind of Heading

Some text. Dean then started to talk about the power of the enclosure element in RSS 2.0. What is great about it is that it enables one to syndicate all sorts of digital content. One can syndicate video, music, calen it is that it enables one to syndicate all sorts of digital content. One can syndicate video, music, calen Some text. Dean then started to talk about the power of the enclosure element in RSS 2.0.

Оттестировано на Opera 7-8, Firefox 1.0, Safari 1.2.4, IE/win.
Остались только Unix+Linix броузеры и Ie5Mac. Но и там по идее все идеально.

Так как ИЕ7 не понимает хак _height:0 то для него следует использовать либо conditional comments либо другие виды хаков как то - $height. Спасибо Max за замечание!

Зато теперь какого бы размера ни была картинка - текст всегда будет отображен в стороне от неё.

Говоря русским языком свойство display:table обеспечивает “вертикальную целостность блока” или запрет на обтекание FLOATов. Текст внутри блока с этим свойством не будет обтекать float элементы.

Если кто то знает еще что то касательно этого свойства буду рад услышать.

Еще немного инфы

XHTML/CSS

Комментарии(38) к “display:table”

1. 4 июля | kost

Спасибо, интересно. Тоже волновала такая тема, но делал таблицами…

Очевидно, автоматический расстановщик кавычек переусердствовал, и вставляет их в код:

Heading

2. 4 июля | bsn

могу под Линуксом потестить в фаерфоксе, опере, konqueror’e, в текстовых браузерах :)

3. 4 июля | ganges

Аналогично 2 bsn :)

4. 5 июля | akella

так посмотрите!
Второй серый блок в посте и есть живой пример этой техники…

5. 7 июля | mourner

Насколько я помню этот прикол с маленьким height в IE, если ты добавишь в свой пример еще один абзац, он окажется под картинкой.

6. 8 июля | rpuwa

Респект - полезно!

7. 8 июля | akella

2 mourner:
Ты конечно прав, по хорошему надо обернуть весь “правый” контент в ДИВ и для него использовать хак.
Но в моей конкретной ситуации я знал что будет только 1 абзац p…

8. 9 июля | mourner

2 akella, в таком случае всё отлично. :-)

9. 10 июля | agat

Респект! Аплодирую стоя :) Очень понравился хак для IE.

10. 12 августа | akella

Как выяснилось в некоторых версиях Konqueror под линухой текст отображается поверх картинки - пока не нашел решения. И хотя процент этих пользователей мизерен, это не совсем приятно и надо иметь ввиду…

На всех остальных возможных платформах все отображается на ура!

11. 29 августа | konkov

а прописать для абзаца float:left не пробовали? таки помогает!

12. 29 августа | akella

Боюсь вы не до конца осознали проблему:
1. Размер картинки вам неизвестен (а вы ведь предлагаете указать ширину…)
2. Текст не должен обтекать картинку.

13. 29 августа | Мендокуси

Салют.

Пробовали ли Вы использовать свойство { clear:left } для решения подобных задач?

14. 29 августа | akella

Это свойство(clear:left) предназначено для отображения блока после всех предыдущих блоков с float:left. И я не вижу никакой связи с проблемой описанной в статье… Извините.

15. 27 сентября | ксойд

в Safari 2.0 работает

16. 11 ноября | cssing » Архив » Магия для IE

[…] ИЕ уже не нужно выходит. Более того это свойство зарещает этому блоку обтекать что-либо. (подробнее здесь) Вдобавок этот же хак(в этом варианте известный как Holly Hack) с height: 1%(что […]

17. 20 января | 4Ek

У пикчи с лого Файрфокса адрес старый, не загружается…

18. 20 января | akella

хм - может временные проблемы с удаленным хостом - адрес поправил - должно теперь все работать…

2ксойд: благодарствую :)

19. 1 марта | Platosha

а я решил эту проблему примерно таким образом:
div.post p {
margin-left: 100px;
}

результат выглядит также. правда это не поможет если заранее не известны размеры картинки :)

20. 14 апреля | wil

круто пахает. пасиба !

21. 7 июля | Игорь Фролов

Огромное спасибо! А то я долго бился над этой проблемой, чтобы не нужно было задавать width или тексту или картинке, но так и не придумал. Теперь все ясно.

22. 7 июля | Fenix

Спасибо, мне как раз пригодится сейчас. Полезная штука

23. 7 июля | Игорь Фролов

Возникла еще одна проблема. Допустим таких div’ов класса post у меня штук пять. При расположении друг под другом, если плавающая картинка будет достаточно большая, то она, “прорубит пол” у своего родительского div’a post и картинка следующего post’a прилипнет к ее правому краю. Хорошо бы было применить clear:[]. Да вот беда, у меня слева менюшка еще на плавающем слое. В итоге весь контент поедет вниз, пока не кончится высота менюшки. Пока сделал вертикальные отступы между post’ами побольше. Но это “кривое” решение, конечно. :-( А счастье было так возможно.

24. 10 июля | akella

Честно говоря не совсем понял в чем Ваша проблема - быть может если бы оставили ссылку на пример я бы смог сказать что то более конкретное а так по идее можно добавить overflow:auto и _height:0 или _width:100% для блоков содержащих картинки. с примером проблемы можно было бы сказать что то навернка…

25. 20 августа | Comicz

Большое спасибо, совершенно случайно наткнулся на эту статью, то что описвается понадобится мне буквально в ближайшие 5 минут

26. 24 октября | max

IE7 display:table не поддерживает, и underscore hack исправили
поэтому надо писать $height:0;

27. 31 января | kost

Напишите код в таком виде — можно будет скопировать и вставить. :)


div.post p{
display: table;
_height: 0; /*это для ИЕ5-6*/
zoom: 1; /*это для ИЕ7*/
}

28. 16 февраля | ddvhouse

А у меня вот zoom:1 не сработал для IE7.
У меня картинка больше текста по высоте, и из-за флоата она выходит за низ div’а.
Как див растянуть по высоте картинки? (её размеры заранее неизвестны)

29. 16 февраля | akella

Задай для дива
div{
width:100%;
overflow:hidden
}
должно помочь

30. 6 марта | ser2

хм… а как же в таком случае обойти проблему возникающую если CSS начинается вот так:

*{margin:0px; padding:0px;}

тогда вся верстка летит к чертям….

31. 6 марта | akella

А в чем собственно проблема? у меня все ЦСС файлы начинаются с этой строчки и все работает… Проблема похоже в чем то другом. Если бы Вы показали код можно было бы сказать что то…

32. 28 ноября | Serhiy Valchuk

Зараз стикнувся зі схожим завданням, що необхідно розмістити частину контенту у дві колонки, при цьому завдання трішки важче, тому що у лівій колоні розміщено малюнок, який може бути будь-якого розміру, а під ним підпис, який теж може бути будь-якої довжини.
З цього приводу маю такі зауваження:
1. властивість zoom дії для ІЕ 5.5-7, відповідно у призначення додаткового height не бачу змісту.
2. E ІЕ7 ніби underscore hack виправили, а коли задаєш height 1%, то дана властивість призначає hasLayout, в тому числі і для ІЕ7 і деколи це необхідно використовувати.
3. Наскільки є семантичним використання display:table. Ніби сам контент розміщений у відповідних тегах, тобто структура зберігається, а за допомогою css задається вигляд як у таблиці. Тобто притензій до семантики не мало бути.
Хотілося почути думки з цього приводу.

33. 28 ноября | akella

1. Возможно так, посту было уже больше года когда вышел 7й, я просто добавил по просьбе комментировавшего) нужно еще раз потестить..
2. underscore hack насколько мне известно работает только для 5-6 ИЕ, и именно потому что его исправили в 7 =)
3. Я думаю что понятие семантики вообще имеет отношение только к HTML, и такая маленькая шалость как использование display:table ровным счетом никому не навредит в этом мире.

34. 2 февраля | Игорь

Дельная весчичка! Уже давненько ее пользую, благодаря автору :) Огромный респект!

35. 4 мая | Санча

Спасибо

36. 30 мая | Allinne

Если использовать так:
.container { display:block; _height: 0; zoom: 1; width:100%; }
.container DIV { float:left; width:12em;}

…
…

То в FF 2.x block2 будет отрисовываться под block1. Воспроизводится с большим количеством таких блоков на странице, находящейся на удаленном сервере.

Лечится не display:block и костылем для IE, а как указано у Ивана Сагалаева

Либо float:left, либо position:absolute, либо overflow:hidden; width:100%.

37. 5 августа | kurijov

Решаемо без таблиц.

38. 26 августа | Семантическая верстка — советы и решения. Часть VI. Запрет на обтекание float’ов

[…] display:table […]

Оставить комментарий

Комментировать

Обязательные поля

Ссылки

Последние 5