html – 如何使3“li”列具有可变高度的内容相同的高度

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的高度相等,然后所有的列也应该是相等的高度,通过拉伸“三”的高度.不幸的是,由于我正在使用的插件,他们必须保留为li项目.我认为这可以通过javascript完成相当容易,但是如果可能,我正在寻找一个css解决方案. (需要注意的是,需要在IE7中工作)希望有道理和感谢！

解决方法

对于IE7？

纯CSS？

和所有行1(Div“一”)相等高度？

所有列等于高度？

答案是…不可能.