HTML:
<ul>
<li>
<div class="one">Variable Height Title</div>
<div class="two">Fixed height middle block</div>
<div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
<div class="four">Fixed height footer</div>
</li>
<li>
<div class="one">Variable Height Title Might be two lines long</div>
<div class="two">Fixed height middle block</div>
<div class="three">Variable height middle block</div>
<div class="four">Fixed height footer</div>
</li>
<li>
<div class="one">Variable Height Title</div>
<div class="two">Fixed height middle block</div>
<div class="three">Variable height middle block</div>
<div class="four">Fixed height footer</div>
</li>
</ul>
CSS
li {
float:left;
width:33%;
}
.one, .three {
background-color:blue;
}
.two, .four {
background-color:green;
}
Посмотрите на этот пример: http://jsfiddle.net/WffHD/
Есть ли способ с css only, чтобы сделать "один" div равным по высоте (который должен быть динамическим), а затем также сделать все три столбца равными по высоте на основе самого высокого? Другой способ поставить его: я хочу, чтобы все "одни" divs равны высоте, а затем все столбцы также должны быть равны высоте, растягивая высоту "трех" div. К сожалению, они должны оставаться в качестве вещей из-за плагина, который я использую. Я думаю, что это можно было бы довольно легко выполнить с помощью javascript, но, если возможно, я ищу решение css. (Caveat, нужно работать в IE7) Надеюсь, что это имеет смысл и спасибо!