Табличные элементы без таблиц

Была задача, сделать таблицу для доски объявлений. Вот как должно быть:
blocks

Ключевое слово заказчика было — «Без использования таблиц«. Под словом таблицы, он подразумевал тег <table>.

Еще стоит заметить, что блоки будут разной высоты!

Я решил решить этот вопрос с помошью списка и стиля display:inline;.

Вот такая html конструкция получилась:
<ul>
<li>
<img src="photo.jpg" width="75" height="75" alt="" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</li>
</ul>

CSS:
li {
width: 130px;/* Ширина блоков */
border: 1px solid #ссс; /* Обрамление блоков */
display: inline-block; /* Задаем inline-block всем блокам */
margin: 5px;
padding: 5px;
vertical-align: top; /* Вертикальное выравнивание по верху */
}

Все, получилось все что хотели:

blocks2

Красиво, от только IE опять снова всех подвел. Все получается в одну колонку. Ie — не поддерживает inline-block, поэтому задаем ему display:inline; c помощью комментариев:
<!--[if lte IE 7]>
<style type="text/css">
ul li {
display: inline
}
</style>
<![endif]-->

И это также не все. Стоит еще добавить для li стиль:
display:-moz-inline-box;
Спасибо. Пример здесь: inline-blocks.html

Комментарии — 3 комментария

  1. #504 rmaksim в 11:38, 26 февраля 2009: (подписался)

    Ответить | Цитировать

    а FF2 уже никто не пользуется?

  2. #521 WebMast в 7:58, 3 марта 2009:

    Ответить | Цитировать

    Для мозиллы хаками правим..

  3. #526 WebMast в 14:02, 4 марта 2009:

    Ответить | Цитировать

    Mozilla официально больше не поддерживает FireFox 2.

    А о хаках напишу в следующей статье!

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting