display:table

3 July, 2005

XHTML/CSS

До недавнего времени считал это свойство практически бесполезным. Подходящим лишь для игр с 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

54 комментариев к “display:table”

kost | 1. 4 July, 2005

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

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

Heading

bsn | 2. 4 July, 2005

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

ganges | 3. 4 July, 2005

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

akella | 4. 5 July, 2005

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

mourner | 5. 7 July, 2005

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

rpuwa | 6. 8 July, 2005

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

akella | 7. 8 July, 2005

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

mourner | 8. 9 July, 2005

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

agat | 9. 10 July, 2005

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

akella | 10. 12 August, 2005

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

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

konkov | 11. 29 August, 2005

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

akella | 12. 29 August, 2005

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

Мендокуси | 13. 29 August, 2005

Салют.

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

akella | 14. 29 August, 2005

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

ксойд | 15. 27 September, 2005

в Safari 2.0 работает

cssing » Архив » Магия для IE | 16. 11 November, 2005

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

4Ek | 17. 20 January, 2006

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

akella | 18. 20 January, 2006

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

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

Platosha | 19. 1 March, 2006

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

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

wil | 20. 14 April, 2006

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

Игорь Фролов | 21. 7 July, 2006

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

Fenix | 22. 7 July, 2006

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

Игорь Фролов | 23. 7 July, 2006

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

akella | 24. 10 July, 2006

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

Comicz | 25. 20 August, 2006

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

max | 26. 24 October, 2006

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

kost | 27. 31 January, 2007

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


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

ddvhouse | 28. 16 February, 2007

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

akella | 29. 16 February, 2007

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

ser2 | 30. 6 March, 2007

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

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

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

akella | 31. 6 March, 2007

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

Serhiy Valchuk | 32. 28 November, 2007

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

akella | 33. 28 November, 2007

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

Игорь | 34. 2 February, 2008

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

Санча | 35. 4 May, 2008

Спасибо

Allinne | 36. 30 May, 2008

Если использовать так:
.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%.

kurijov | 37. 5 August, 2008

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

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

[…] display:table […]

INOZ | 39. 9 December, 2008

Как раз то, что нужно в данный момент. СПАСИБО! Но вот только я два часа убил на то, чтобы понять, почему у меня это не работает. Оказывается, упустил то, что надо поставить float: left для картинки. *краснею*

Display:table « Заметки html верстальщика | 40. 8 February, 2009

[…] От чего и почему вы можете узнать здесь. […]

Алексей | 41. 9 February, 2009

Премного благодарен.

Марат | 42. 26 March, 2009

Огромное спасибо!!!

Виталий | 43. 4 September, 2009

[..]От чего и почему, теперь здесь, старая ссылка не работает[..]

Виталий | 44. 8 September, 2009

Новый адрес http://profi-web.ru/full_blog/32/display_table.news.php

Антон | 45. 23 October, 2009

Спасибо огромнейшее!
Отлично работает в случае если нужно сделать меню И справа И слева И они могут быть, а могут и не быть (т.е. в разных вариациях)!
До этого делал таблицами… :(

Deff | 46. 26 January, 2010

Ещё пара комментов:
1. для ИЕ7 можно использовать не zoom:1, а min-height:1px. Те же яйца, но душу греет.
2. в ИЕ6 и ИЕ7 див, для которого задан display:table, занимает всю оставшуюся ширину, а в опере (10 – точно) и фф (3 – точно) див занимает ширину своего содержимого. если для этого дива не заданы бекграунды или бордеры, несущие дизайновую нагрузку, то это не принципиально. А вот когда есть, к примеру, подчёркивание под новостью, а превью новости короткое, то эта черта рисуется не на весь див-родитель (во всяком случае, у меня).
3. ИЕ6&ИЕ7 и опера&фф по-разному трактуют горизонтальные padding’и и margin’ы, заданные для дива с заданным display:block. поэтому я стараюсь задавать отступы для флоаченной картинки (той, что в примере выше).
4. с помощью display:table получаются неплохие двух- и трёхколоночные шаблоны, только код боковых колонок нельзя вынести после кода контента.

Deff | 47. 26 January, 2010

Ой, а я и не заметил, что посту почти 5 лет

cssing :: Архив :: overflow:hidden | 48. 26 April, 2010

[…] непопулярный трюк. Я уже писал про display:table. Так вот, это &#8212 […]

Max Brown | 49. 2 July, 2010

Автору респект. Изломал себе всю голову, пытаясь избежать заползания анонса под фотку. Моя идея насчёт {padding-left:[ширина фотки]px;} работала лишь частично. Решение, предложенное здесь, выручило.

Алексей | 50. 14 July, 2010

По моему еще должно сработать если для блока задать display:inline-block;

в этом случае для ие нужен хак небольшой

_display:inline;
zoom:1

или

*display:inline;
zoom:1

непомню понимает ли 7 ка просто инлайн блок)

Vpopulare.ru » Float’омагия: пробуем не «плавать» в спецификации, чтобы не утонуть в потоке | 51. 21 January, 2012

[…] боксов). Именно поэтому классические уже приемы типа этого и этого работают стабильно, и мы можем смело их […]

Владимир Старков | 52. 7 August, 2012

А как быть если `h2` многострочный и контейнер содержащий все `p` из-за этого сдвигается
и весь трюк перестаёт работать:
http://img407.imageshack.us/img407/3770/60111849cd6441d7ac9aeca.png

онлайн демо фейла — http://dabblet.com/gist/3283452

я ума не приложу как решить эту проблему. а использовать `padding-left` не хочу, так как совсем не гибко
а использовать

Helga | 53. 3 December, 2013

просто отлично! вечно извращаешься с картинкой и флоатом, а тут такое лаконичное решение. спасибо!

overflow:hidden | Просто блог | 54. 19 February, 2014

[…] непопулярный трюк. Я уже писал про display:table. Так вот, это &#8212 лучше. P.S.: оказалось трюк таки […]

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