display:table
03 Jul, 2005До недавнего времени считал это свойство практически бесполезным. Подходящим лишь для игр с CSS в топ-броузерах. А на самом деле это свойство решило проблему нерешаемую практически никаким другим способом.
Проблема
К примеру есть на сайте набор вот таких блоков: картинка + заголовок + выдержка. В коде соответственно имеем:- <div class="post">
- <img src="./i/image.jpg" alt="" />
- <h2><a href="#">Heading</a></h2>
- <p>text tex text text text text ext text text textt</p>
- </div>
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: (для выдержки что загибалась под картинку)- div.post p{
- display: table;
- _height: 0;/*это для ИЕ5-6*/
- zoom: 1;/*это для ИЕ7*/
- }
В результате вышеуказанный пример превращается в такой
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.
Так как ИЕ7 не понимает хак _height:0 то для него следует использовать либо conditional comments либо другие виды хаков как то - $height. Спасибо Max за замечание!
Зато теперь какого бы размера ни была картинка - текст всегда будет отображен в стороне от неё.
Говоря русским языком свойство display:table обеспечивает "вертикальную целостность блока" или запрет на обтекание FLOATов. Текст внутри блока с этим свойством не будет обтекать float элементы.
Если кто то знает еще что то касательно этого свойства буду рад услышать.
Еще немного инфы
- Pup's Float Hack - CSS игры на эту тему
- Развитие темы + display: table-cell; и т д
div.post p{ display: table; _height: 0; /*это для ИЕ5-6*/ zoom: 1; /*это для ИЕ7*/ }