25 августа 2009, 11:10

CSS: Плавающие блоки с разной высотой, с выравниванием в ряду по самому высокому Избранное

Иногда когда делаем блоки с float:left, приходится сталкиваться с блоками разной высоты, и они при переходе на новую строчку, начинают строится после самого высокого, что ужастно... И приходится или ставить после определённого количества br clear=’all’ или указывать фиксированую высоту, что не всегда приемлемо.

Этот вопрос можно решить всего-лишь сэмулировав display:inline-block для старых ИЕ и для старых фоксов, ниже 3
.gallery-item {
    border-top:1px solid #AAAAAA;
    width: 147px;
    *width:147px;
    display: -moz-inline-stack; /* для FF ниже 3  */
    display:inline-block;
    font-size:91%;
    margin: 0 24px 20px 0;
    min-height:178px;
    vertical-align:text-top;
    border:1px solid #797873;

    /* уголки, ля-ля-ля */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    padding: 5px 5px 0;
    color: #4b4c4c;
    zoom:1; /* обычный layout fix для ИЕ6 */
    *display:inline; /* для ИЕ 6, 7 */

}


4 комментария РСС

Ростислав Сирык
Спасибо за этот рецепт, я уж намучался с этими float-ами и надежду потерял :)
Vitaliy Bogdanets
Приходите ещё :)
Дмитрий
То что надо!)
Артем
Спасибо Вам огромное! День убил на поиск решения.
Ирина
Спасибо! Мне тоже это решение очень помогло!

Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter