-1 
<div id='row1'>
    <div id='column1'>This is a couple of lines long</div>
    <div id='column2'>This column can be varying in length, so this could go on for 5 lines or 20 lines</div>
    <div id='column3'>This is a another column of a few lines</div>
</div>

第 1 行宽 960。每列宽 310 并设置为 display:inline-block （也有边框）。

考虑到第 2 列的不同高度，我需要所有三列的高度相同。我已尝试将所有列都设置为 height:100%，但我无法设置 row1 的高度，因为我需要根据多少来扩展内容在第 2 列。

如何让所有三列显示相同的高度，但该高度由第 2 列的动态内容决定？

  Col1      Col2     Col3
****************************
|        |        |        |
|        |        |        |
|        |        |        |
|        |        |        |
|        |        |        |
|        |        |        |
****************************
4

3 回答 3

2

为此使用表格，这要容易得多，而且不需要任何技巧......

<table border="1" cellpadding="3" cellspacing="3">
    <thead>
        <tr>
            <td>Col 1</td>
            <td>Col 2</td>
            <td>Col 3</td>  
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Cell</td>
            <td>Table Cell</td>
            <td>Table Cell</td>
        </tr>
    </tbody>
</table>
于 2013-10-13T23:10:34.803 回答
0

这是您可能正在寻找的内容，类似于克里斯的回答。

HTML：

<div id="container">
    <div class="column">column 1</div>
    <div class="column">column 2</div>
    <div class="column">column 3</div>
</div>

CSS：

#container {
    display: table;
    position: absolute;
    width: 960px;
    border: 1px solid #000;
    padding: 5px 5px 5px 5px;
}
.column, .column, .column {
    display: table-cell;
    text-align: center;
    width: 310px;
    border: 1px solid #000;
}

这是一个要测试的实时 JSFiddle 文件（http://jsfiddle.net/ULQwf/364/）

于 2013-10-14T02:00:54.957 回答
0

如果您不关心 ie7 支持，您可以使用当前的 html

#row1 div { 
display:table-cell; 
width:200px; 
padding:0 15px; 
border:1px solid #efefef;
}

理想情况下，您会将代码包装在另一个 div 中并使用 display:table; 和显示：表行；

示例：http: //jsfiddle.net/Y4Gub/

于 2013-10-13T23:21:18.140 回答