三列布局等高答案

【问题标题】：three column layout equal height三列布局等高
【发布时间】：2015-01-31 05:20:09
【问题描述】：

如何仅使用 css 和 html（无 js）制作具有相同高度的三列布局

【问题讨论】：

标签： html

【解决方案1】：

最简单的方法是使用faux column background technique。

您还可以尝试使用带有overflow: hidden 的容器为三个 div 提供大量底部填充和大量底部边距。不过，它与内联锚点效果不佳。

【讨论】：

@abdullah 不，对不起。如果您不必支持display: table-cell。
上一个更好。coz，我要支持ie7+

【解决方案2】：

<html><body>

<div>

<div style="float:left;height: 33.33%;width:10%;background-color:red">zdfsfs</div>
<div style="float:left;height: 33.33%;width:10%;background-color:blue">zgfsgsgfsgf</div>
<div style="float:left;height: 33.33%;width:10%;background-color:cyan">zvgzcxgvxz</div>
</div></body></html>

【讨论】：

但是当内容随机增加时会发生什么
我已经给了小宽度。你可以增加宽度。仍然内容更大然后内容会出来 div 并且这个解决方案将不起作用。我会尝试找到它的解决方案并让你知道如果我明白了。
谢谢。但我认为我接受的“亚历克斯”给出的解决方案更好。试试这个。

【解决方案3】：

div {display : table-cell;}

这可能是问题的另一个解决方案！欲了解更多信息，请查看此链接：Is there a disadvantage of using `display:table-cell`on divs?

【讨论】：