Картинка в стороне от текста без обтекания
К примеру есть на сайте набор вот таких блоков: картинка + заголовок + выдержка.
В коде соответственно имеем:
<div class=”post”>
<img src=”./i/image.jpg” alt=”" />
<h2><a href=”#”>Heading</a></h2>
<p>text tex text text text text</p>
</div>Cуть проблемы в том что заказчик хочет картинку с одной стороны блока и текст с другой. И это при том что картинка может быть какого угодно размера.
Итак первое и очевидное сделать float:left; картинке, но тогда появится обтекание. Если бы знать размеры картинок - можно бы было задать ширину для выдержки и заголовка. Но в том то и дело что картинки эти могут быть любыми. Казалось бы без таблиц не обойтись, а не тут то было, можно:
div.post p{
display: table;
_height: 0;/*это для ИЕ5-6*/
zoom: 1;/*это для ИЕ7*/
}Эта приблуда должна работать в Opera 7-8, Firefox 1.0, Safari 1.2.4, IE/win