Question

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

Answer 1

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

您还可以尝试使用带有overflow: hidden的容器给出三个具有大量底边距的底部填充物。但它与内联锚点不太搭配。

Answer 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>

Answer 3

div {display : table-cell;}

这可能是问题的另一个解决方案！有关详细信息，请参阅此链接：Is there a disadvantage of using `display:table-cell`on divs?

三列布局相等的高度

3 个答案: