如何制作高度可变的3"li"列相同的高度

Question

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只能使"一"div高度相等(必须是动态的),然后根据最高的那个使所有三列高度相等？放置它的另一种方法:我希望所有"一"div都是相等的高度,然后通过拉伸"三"div的高度,所有列也应该是相等的高度.不幸的是,由于我正在使用的插件,它们必须保留为li项目.我认为这可以通过javascript轻松完成,但我正在寻找一个css解决方案,如果可能的话.(警告,需要在IE7中工作)希望有意义并且感谢!

Answer 1

对于IE7？

和纯CSS？

并且所有第1行(Div"one")平等高度？

并且所有列均等高度？

答案是......不可能.

Answer 2

很难或使用JavaScript.

这实际上是Flex Box Layout的设计之一.所以你会有这样的事情:

#mylist {
    display: flex;
    flex-flow: row wrap;
}
#mylist>li {
    flex: 1 1 100%;
}

并且它应该为所有元素提供相同的高度.有关更多选项,请参阅完整的Flex Box布局规范.

只需确保您拥有适当的供应商前缀,就可以了.