alexilin

Хочу поделиться с вами найденным решением проблемы, с которой я сталкивался раньше не один раз, но нормального выхода не находил. Проблема была связана с вёрсткой нескольких блоков, которые располагаются друг за другом.

Например так:

Если высота одинакова для всех блоков, то проблем возникнуть не должно. Решалось это путём использования плавающих блоков и указания им необходимой ширины и высоты. Но что делать, если в каждом блоке разный объём контента и соответственно разная высота. В результате вёрстка могла «поехать»:

Как написал автор оригинала: «Необходимо правильное и семантичное решение с гибкостью, которой обладают таблицы».

Использовать будем такую структуру:

1
2
3
4
5
6
7

<ul>
    <li>
        <img src="photo.jpg" width="75" height="75" alt="" />
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </li>
    …
</ul>

и следующие стили:

1
2
3
4
5
6
7

li {
    width:130px;
    border: 1px solid #ссс;
    display: inline-block;
    margin: 5px;
    padding: 5px
}

В FF3, Safari 3, Opera и IE8b2 выглядит вроде нормально, но что-то не так с вертикальным выравниванием:

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

1
2
3
4
5
6
7
8

li {
    width: 130px;
    border: 1px solid #ссс;
    display: inline-block;
    margin: 5px;
    padding: 5px;
    vertical-align: top
}

То что нужно. Однако в IE6 и IE7 всё совсем не так.

IE6 и IE7 не поддерживают inline-block, поэтому с помощью условных комментариев прописываем для них display:inline.

1
2
3
4
5
6
7

<!--[if lte IE 7]>
<style type="text/css">
    ul li {
        display: inline
    }
</style>
<![endif]-->

Оригинал: Cross-Browser Inline-Block.