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

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

Задача

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

68

Решение

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)

Оценить:|1
  
Комментировать
Раздел: Обучение    
Просмотров: 3133
Комментариев (6)
  1. Greg
    Григорий Кочнев [Greg]
    27.10.2011 в 18:08

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

  2. slaffko
    10.11.2011 в 16:03

    Если требуется поддержка ИЕ7 то этот метод не подойдет

  3. Ольга [Olga]
    10.11.2011 в 17:56

    почему? работает, проверенно не на одном сайте, только надо хак прописать, он указан выше

  4. SelenIT
    SelenIT
    11.11.2011 в 20:33

    Маленькое уточнение насчет IE7 (и ниже): нужный эффект в нем достигается благодаря комбинации display:inline и «особой IEшной магии» под названием hasLayout (подробнее о нем). В данном примере hasLayout включается благодаря наличию width. А для изначально инлайновых элементов (типа span или i) display:inline-block в старых IE работает сразу, без костылей.

    И еще важный момент, который нужно учитывать при работе с инлайн-блоками — пробелы между тегами, которые становятся значимыми и дают отступы, как между словами в обычном тексте. С этим можно бороться средствами CSS (чаще всего встречаются «обнуление» font-size контейнера и отрицательные маргины, можно использовать отрицательный word-spacing, но он требует костылей в Webkit-браузерах), но единственный пуленепробиваемый способ убрать эти отступы — физически удалить пробелы между тегами из кода.

  5. Xap4o
    Роман [Xap4o]
    24.11.2011 в 09:12

    а я делаю тоже самое только вот так display: inline-block; zoom: 1; *display: inline;

Оставить комментарий