HTML - плавающие блоки


Ох уж эти плавающие блоки. Сколько раз я получал PSD шаблоны вот так:

Но после вёрстки не всегда так получается. Как правило мы наблюдаем сдвиг всех блоков в том случае, если один из них не стандартной высоты. Выглядит это так:

Не очень приятно выглядит...

Как видно на рисунке, первый блок немного выше остальных, поэтому пятый блок уехал в право.

Мы сделаем простую страницу с неупорядоченным списком сделаем её inline-block:

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

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

И посмотрим на это в Firefox 3, Safari 3 и Opera:

Очевидно, что-то не так с вертикального выравниванием. Ну, не совсем так, потому что это правильное поведение, но это не то, что мы хотим. 

То, что здесь происходит - это базовая линия каждого <li> в настоящее время приведена в соответствие с базовой линией родительского <ul>. Что означает "базовый", спросите вы? Картинка вместо тысячи слов:

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

Попробуем сделать так:

Теперь вы можете увидеть что каждый базовый элемент выравнивается с базовой линией текста. Этот текст не в <li>, а просто в текстовом узле из родительского <ul>.

Во всяком случае, это легко исправить: вертикальное выравнивание сверху, что приводит к большим изменением сетки:

Кроме этого все еще не работает в Firefox 2, IE 6 и 7.

Давайте начнем с Firefox 2. 

Firefox 2 не поддерживает встроенные блоки, но он поддерживает '-moz-inline-stack', которые отображаются так же, как inline-block. И когда мы добавляем его во встроенный блок, FF2 игнорирует эту декларацию и применяет -moz-inline-stack, потому что он не поддерживает встроенный блок. Браузеры, поддерживающие встроенный блок будет использовать его и игнорировать предыдущие инструкции.

<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>

Это, кажется, "перезагружает" все внутри <li> и начинает правильно их отображать.

Теперь, IE 7. 

IE 7 не поддерживает встроенные блоки, но мы можем обмануть его в описании <li> и сделать их как-бы встроенными. Как? hasLayout - волшебное свойство IE! Вы не можете установить hasLayout на элемент явно, но вы можете вызвать его с другими декларациями, как zoom: 1. 

Когда мы добавляем zoom: 1 и * display: inline; (звезда ломает целевой IE6 & 7) в <li>, мы заставляем IE 7 отображать их так, как если бы они были встроенными блоками:

<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 (Подчеркивание - хак для IE6) в 250 пикселей даст высоту всех <li> 250px, и если их содержание больше, чем это, они будут расширяться, чтобы соответствовать высоте. Все остальные браузеры будут игнорировать _height.

Таким образом, после всей работы, вот окончательный CSS и HTML:

<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>
            <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
            alt="lobster" width="75" height="75"/>
        </div>
</li>

 

 


Тэги:

Комментарии: 0

Прокомментировать »

 
 
 

Прокомментировать

 
 
Сообщение *
 
Проверочный код *
 
 
 
Яндекс.Метрика