CSS: установите высоту до 100% родительского - PullRequest
Новая
       27

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

0 голосов
/ 08 декабря 2010

У меня есть несколько рядов больших пальцев изображений внутри якорей внутри 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>

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

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

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

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

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

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

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

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

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

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

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

1 Ответ

1 голос
/ 08 декабря 2010

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

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

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

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

...