等高CSS列 [英] Equal height CSS columns

问题描述

使用等高列与跨浏览器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;
}

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

There are more complicated demo pages, but I am looking to use the first example for my purposes. Why isn't the example working?

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

推荐答案

等高列的最简单方法是使用display: table.

The simplest way to do equal height columns is with 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/

这篇关于等高CSS列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！