/// Убираем лестницу, свойство inline-block

Убираем лестницу, свойство inline-block Visit link
15 Dec / 2013
Рубрика: Веб верстка


Сегодня мы поговорим об очень важном свойстве inline-block. Многие веб-верстальщики сталкиваются с проблемой появления лестницы у блоков, расположенных в одну строчку. Многие верстальщики скажут, это очень просто: фиксированная высота и ширина, обтекание слева и все готово. Однако как всегда здесь есть свои нюансы. Ведь блоки могут иметь разную высоту, при разном количестве контента в блоке, и это будет выглядеть так:

  Из-за того, что первый блок выше, чем остальные, 5й блок, обтекается слева вместо того, чтобы находиться под первым. Проще говоря нам нужно получить блок с резиновостью, как у таблицы, но с более тщательной, семантической разметкой. Итак, будем наводить красоту. Начнем с неупорядоченного списка, который отобразим в строчку:

<ul>
    <li>
        <h4>Свойство inline-block</h4>
    </li>
...
<ul>
<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: inline-block;
        margin: 5px;
    }
</style>

Вот как это выглядит в Firefox 3, Safari 3 and Opera: 

Как обычно, что-то не так с вертикальным выравниванием. Вернее, все так, оно ведет себя, как и должно, но не так, как нужно нам. Свойство baseline выравнивает элементы каждого li с родительским ul. Для тех, кто забыл, что такое baseline, картинка:  Как выглядит первая попытка выравнивания блока по базовой линии: 

  Как вы можете видеть, каждая базовая линия выровнена с базовой линией текста. В любом случае, выход такой:  vertical-align:top. И вот, что получается: 

Как и следовало ожидать, не работает в  Firefox 2, IE 6 and 7. Разберемся с Firefox 2. Firefox 2 не поддерживает свойство inline-block, но поддерживает ‘-moz-inline-stack’, которое отображает элементы так же как свойство inline-block. И когда мы добавляем его перед display:inline-block, все работает.

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
    }
</style>

Но есть баг:

Чтобы убрать этот баг, вставим в каждый li div:

<li>
        <div>
            <h4>This is awesome</h4>
            <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
            alt="lobster" width="75" height="75"/>
        </div>
</li>

Теперь разберемся с IE 7. IE 7 не поддерживает свойство inline-block, но мы можем поэкспериментировать с <li> как если бы они были inline-block-ами. Как? Есть одно свойство hasLayout у IE, которрое творит чудеса. Вы не можете установить hasLayout явно в элемент вот так: hasLayout:true; но вы можете запустить его, используя свойство zoom:1, например. Когда мы добвляем zoom:1 и *display:inline (звездочка, для того, чтобы работало в IE6,7) к <li>, мы застявляем IE 7 отображать их, как если бы они были inline-block:

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
    }
</style>

 

 
Остался IE 6:

 

 IE 6 не поддерживает min-height, но благодаря его неправильной обработке свойства высоты, мы можем это использовать в своих целях. Устанавливая  _height в 250px , мы получим высоту всех <li> в 250px, и если их контент больше, чем 250, они будут увеличиваться. В итоге, получаем такой код: <style> li { width: 200px; min-height: 250px; border: 1px solid #000; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: 1; *display: inline; _height: 250px; } </style> <li> <div> <h4>This is awesome</h4>  </div> </li> Перевод статьи: http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/


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

Copyright 2011-2016. Alenna's portfolio Копирование материалов с сайта незаконно.