Question

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

row1是960宽。每列为310宽并设置为display：inline-block（也带有边框）。

考虑到第2列的高度变化，我需要所有三列都是相同的高度。我已尝试将所有列作为高度：100％，但我无法设置row1的高度因为我需要根据第2列中的内容进行扩展。

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

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

Answer 1

使用表格，更容易，不需要黑客......

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

Answer 2

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

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

理想情况下，您可以将代码包装在另一个div中并使用display：table;并显示：table-row;

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

Answer 3

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

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/）

CSS：即使各种c，使所有列高度相同

3 个答案: