如何使具有可变高度内容的3个列的高度相同(&A)

2022-08-11 00:00:00 html css internet-explorer-7

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(分区"一")高度相等?

和所有列高度相等?

答案是……不可能。

相关文章