愿所有的美好和期待都能如约而至

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

发布时间:  来源:互联网  作者:匿名  标签:css error How to make 3 "li" columns with vari  热度:37.5℃

本文介绍了如何使具有可变高度内容的3个列的高度相同(&A)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP