如何使具有可变高度内容的3个列的高度相同(&A) [英] 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使"one"div等于高度(必须是动态的)，然后根据最高的那一列也使所有三列的高度相等？另一种说法是：我希望所有的"一"div都是等高的，然后通过拉伸"三"div的高度，所有列也应该是等高的。不幸的是，由于我使用的插件，它们必须保留为li项。我认为这可以很容易地完成与脚本，但我正在寻找一个css解决方案，如果可能的话。(警告，需要在IE7中工作)希望这是有意义的，谢谢！

推荐答案

用于IE7？

和纯css？

和所有行1(分区"一")高度相等？

和所有列高度相等？

答案是……不可能。

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