如何使3个可变高度的"li“列的内容相同
如何使3个可变高度的"li“列的内容相同
提问于 2013-01-10 07:06:10
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等于高度(必须是动态的)，然后根据最高的列也使所有三列的高度相等？另一种说法是:我希望所有的“1”div都是等高的，然后通过拉伸“3”div的高度，所有的列也应该是等高的。不幸的是，由于我使用的一个插件，它们必须保留为li项。我认为这可以用javascript相当容易地完成，但如果可能的话，我正在寻找一个css解决方案。(注意，需要在IE7中工作)希望这是有意义的，谢谢！
回答 9
Stack Overflow用户
回答已采纳
发布于 2013-01-15 08:33:25
为了IE7？
和纯CSS？
和所有行1(分区“1”)的高度是否相等？
和所有列的高度相等吗？
答案是..。不可能。
Stack Overflow用户
发布于 2013-01-10 07:12:52
有很大的困难，或者使用JavaScript。
这实际上是设计Flex Box布局的目的之一。所以你会有这样的东西：
#mylist {
display: flex;
flex-flow: row wrap;
}
#mylist>li {
flex: 1 1 100%;
}它应该给所有的元素以相同的高度。有关更多选项，请参阅full Flex Box Layout specification。
只需确保您有适当的供应商前缀，就可以使用了。
Stack Overflow用户
发布于 2013-01-15 11:40:19
如果不对HTML进行一些更改，您所需要的是不可能实现的。
一种可能的替代方法是，通过一些HTML更改，将元素威胁为表、
- 作为表格行，而作为表格单元格。您需要将所有元素放在同一行( li )中，并使用一个额外的li元素作为页脚
例如：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14248095
复制相关文章
相似问题