Question

我想有三个专栏：

左栏（红色背景）
中心栏（黄色背景）
右栏（黑色背景）

HTML，像这样：

<div id="container">
    <div id="left_column">
        <p>text</p>
    </div>

    <div id="center_column">
        <p>loooooong text</p>
        <p>other text</p>
    </div>

    <div id="right_column">
    </div>
</div>

每列应具有相同的高度（灵活）

我制作了演示http://jsfiddle.net/4hj4f/8/ - 但这个CSS错了 - 列的高度不同

Answer 1

您可以使用 display：table 来实现此类功能。写得像这样：

body, html{height:100%}
#container {
    height: 100%;   
   display:table;    
}

#left_column, #center_column, #right_column {
    display: table-cell;
    width: 200px;
    height: 100%;
    vertical-align:top;
}

选中此http://jsfiddle.net/4hj4f/9/

Answer 2

设置容器高度。它足以设定你的条件。

#container {
height: 500px;            
}

演示：fiddle

div的高度 - 应该是平等和灵活的

2 个答案: