CSS: установите высоту на 100% от родительской

У меня есть несколько рядов миниатюр изображений внутри якорей внутри div, по одному div для каждой строки, например:

<div class="row"><a><img></a><a><img></a><a><img></a></div>
<div class="row"><a><img></a><a><img></a><a><img></a></div>

Изображения имеют разные пропорции, некоторые портретную, некоторые альбомную ориентацию. Максимальные размеры миниатюр — 150 пикселей (в ширину или высоту), и они всегда имеют ширину или высоту 150 пикселей.

Я хочу, чтобы все изображения были выровнены по нижней части родительского элемента .row div. Таким образом, если есть какие-либо портреты в ряд, любые пейзажи будут выровнены внизу и будут иметь некоторое пространство над ними. Чтобы изображения выровнялись по низу, я позиционирую их абсолютно и относительно их привязки. Для этого я использую следующий CSS:

<style>
div.row {
    float: left;
    clear: both;
}

.row a {
    position: relative;
    float: left;
    width: 175px;
}

.row a img{
    position: absolute;
    bottom: 0px;
}
</style>

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

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

Я хочу, чтобы каждый div .row был высотой самого высокого изображения, которое он содержит.

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

Хотя я бы смог исправить это, установив высоту элементов на 100%:

<style>
.row a {
    position: relative;
    float: left;
    width: 150px;
    height: 100%;   
}
</style>

Тогда это будет 100% его родителя, .row div. Но по какой-то причине это работает, только если я укажу высоту div .row, и тогда у меня будет та же проблема (все строки имеют одинаковую высоту независимо от фактического содержимого:

<style>
div.row {
    float: left;
    clear: both;
    height: 150px;
}

.row a {
    position: relative;
    float: left;
    width: 150px;
    height: 100%;   
}
</style>

Однако, поскольку div .row динамически растет вместе с содержащимися в нем изображениями, на самом деле он имеет высоту, на которую я пытаюсь сослаться с моей высотой: 100% для тега a. Но почему-то не работает.

Почему? Что я тут не понимаю, и как это сделать? Я трачу на это много часов, прежде чем обратиться сюда, надеюсь, у кого-то есть золотой ответ.


css height positioning
person mikkelbreum    schedule 08.12.2010    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Возможно, проще использовать inline-block вместо плавающего. Что-то вроде этого:

http://jsfiddle.net/cvQAZ/1/

Или вам нужны ссылки на самом деле имеют одинаковую высоту? Затем попробуйте макет «таблица» (не поддерживается IE6):

http://jsfiddle.net/DpvgR/1/

person RoToRa    schedule 08.12.2010
comment
Большое спасибо, это прекрасно работает, на самом деле чтение последних сообщений в сети об использовании встроенного блока открыло мне глаза на его полезность. Раньше я избегал этого из соображений перекрестной совместимости, но, похоже, это не проблема с исправлением встроенного блока IE6/6 вместо исправления встроенного блока. Спасибо! - person mikkelbreum; 08.12.2010