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

row1 の幅は 960 です。各列の幅は 310 で、display:inline-block が設定されています (これも境界線付き)。

列 2 の高さが異なることを考慮して、3 つの列すべてを同じ高さにする必要があります。すべての列を高さ:100% として試しましたが、row1 の高さを設定できません。内容は列 2 にあります。

3 つの列すべてに同じ高さを表示するにはどうすればよいですか? ただし、その高さは列 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 に答える