等高 CSS 列答案

【问题标题】：Equal height CSS columns等高 CSS 列
【发布时间】：2012-12-22 15:06:24
【问题描述】：

使用Equal Height Columns with Cross-Browser CSS 示例

HTML：

<div id="container1">
  <div id="col1">Column 1<br/>2</div>
    <div id="col2">Column 2</div>
    <div id="col3">Column 3</div>
</div>

CSS：

#container1 {
    float:left;
    width:100%;
}
#col1 {
    float:left;
    width:30%;
    background:red;
}
#col2 {
    float:left;
    width:40%;
    background:yellow;
}
#col3 {
    float:left;
    width:30%;
    background:green;
}

还有更复杂的演示页面，但我希望将第一个示例用于我的目的。为什么示例不起作用？

http://jsfiddle.net/YryJM/2/

【问题讨论】：

现在可以用flexbox解决“等高列”的问题了。
您选择的示例没有给出等高的列。它的描述是： > 这里是强制容器 div 到最长列的高度的 CSS。您需要使用博文末尾的最终版本才能获得您想要的效果 - matthewjamestaylor.com/blog/equal-height-columns-3-column.htm

标签： css multiple-columns equal-heights

【解决方案1】：

实现等高列的最简单方法是使用display: table。

#container1 {
    display: table;
    width:100%;
}

#col1, #col2, #col3 {
  display: table-cell;
}
#col1 {
    width:30%;
    background:red;
}
#col2 {
    width:40%;
    background:yellow;
}
#col3 {
    width:30%;
    background:green;
}

http://jsfiddle.net/YryJM/3/

【讨论】：

【解决方案2】：

也许这会起作用？通过设置容器div的固定高度，然后将col div设置为100%？

#container1 {
float:left;
width:100%;
height:50px;
}
#col1 {
float:left;
width:30%;
background:red;
height:100%;
 }
#col2 {
float:left;
width:40%;
background:yellow;
height:100%;
}
#col3 {
float:left;
width:30%;
background:green;
height:100%;
}

示例 http://jsfiddle.net/squinny/dps4f/1/

请问这对你有没有帮助？

【讨论】：