Обучение. display:inline-block

Знания накапливаются с практикой. Вначале решение какой-то задачи кажется не возможным, потом решение может даже прийти само собой, но чаще конечно решения перенимаются. Перенимайте ;)

Ниже приведена задача и ее решение, раньше казалось не осуществимым, хотя так оно и было, ведь FF2 не поддерживал свойство display:inline-block, потом еще долго я не использовала данный метод.

Задача

Надо сделать верстку блоков с фиксированной шириной, но не с фиксированной высотой, + резиновая верстка, т.е. при разных значениях разрешения экрана, количество блоков в ряду будет изменяться.

Решение

Html

<div class="item">
	<a href="#"><img src="img.jpg" width="87" height="85" alt="" /></a>
	текст
</div>
<div class="item">
	<a href="#"><img src="img.jpg" width="87" height="85" alt="" /></a>
	текст
</div>

А в CSS пропишем следующее

.item {display:inline-block;  width:130px; padding:22px 33px 17px 0;  vertical-align:top;}

Т.е. наши блоки превращаются в блок, ведущий себя как строчный элемент. Но в IE6 и IE7 результат будет иной, поэтому для этих браузеров надо прописать

.item {display:inline;}

Рабочий пример во вложении

Прикрепленный файл: 85_www.rar (3.47 Kb)