如何使3“li”具有相同高度的可变高度内容的列 [英] How to make 3 "li" columns with variable height content the same height

问题描述

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 使一个divs等于高度（它必须是动态的），然后还使所有三列相等的高度基于最高的一个？另一种方式：我想要所有的一个div是相等的高度，然后所有的列也应该是相等的高度通过拉伸三的高度。不幸的是，他们必须保持为li项目，由于我使用的插件。我认为这可以实现相当容易与JavaScript，但我正在寻找一个CSS解决方案，如果可能的话。 （Caveat，需要在IE7中工作）希望有意义和感谢！

Is there a way with css only to make the "one" divs equal height (which must be dynamic), and then also make all three columns equal height based on the tallest one as well? Another way of putting it: I want all "one" divs to be equal height, and then all columns should also be equal height by stretching the height of the "three" div. Unfortunately they must stay as li items due to a plugin I am using. I think this could be accomplished fairly easy with javascript but am looking for a css solution if possible. (Caveat, needs to work in IE7) Hope that makes sense and thanks!

推荐答案

对于IE7？

和纯CSS？

和所有行1（Divone）等高？

和所有列等于高度？

答案是...不可能。

For IE7?

And Pure CSS?

And All Row 1 (Div "one") Equal Height?

And all Columns Equal Height?

The answer is... Not possible.

这篇关于如何使3“li”具有相同高度的可变高度内容的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！