1

各列が背の高い列の高さまで拡張される 2 つの列を持つレイアウトが必要です。

テーブルを使用すると、次のようになります。

<table class="parent">
    <tr>
        <td class="columnLeft">Column 1</td>
        <td class="columnRight">Column 2</td>
    </tr>
</table>

また、列 1 と 2 は同じ可変高さを維持します。

div には、クロスブラウザーでうまく機能するために多くのハックを必要とするいくつかの解決策 (overflow:hidden などの使用を含む) があります。

(ここの jsFiddle: http://jsfiddle.net/rJjJa/1/ )

この場合、CSS ハック (または多くの余分なマークアップ) の余分な労力を必要とせずに、単純に table を使用します。テーブルはこれでいいと思いますか？

4

2 に答える 2

4

divs をテーブルのように動作させたい場合は、 display: table-cell;for eachを使用できますdiv。tdそれらは;のように動作する必要があります。両方とも同じ高さでなければなりません。これは、最新のすべてのブラウザーと ie8 以降で動作するはずです。

于 2012-11-21T16:09:15.640 に答える
2

レイアウトのタグ<table>が古くなっています。使用しないでください。

代わりに、クロス ブラウザー CSS 互換の 2 カラム レイアウトが多数ありますが、ハックは使用されていません。その 1 つがEqual height columnsです。

等高柱

各列のコンテンツの量に関係なく、背景色は常に最も高い列の高さまで引き伸ばされます。

ここで詳細に説明されている記事:クロスブラウザー CSS を使用した等高列。

于 2012-11-21T12:50:37.843 に答える