div_CSS/HTMLをテーブルのようにレイアウトする

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

以下は私の理解に基づく意訳です。記事の、翻訳が間違っているところは指摘しないでください。私の目的は、この CSS テクニックを伝えることだけです

多くの Web デザイナーは、2 つ以上のコンテナを同じ高さで並べて配置し、それぞれを表示することを好みます。コンテナ内部 コンテナのコンテンツは、複数の列の位置を制御する古典的なテーブル レイアウトのセルに似ています。また、コンテナのコンテンツを中央揃えまたは上揃えにすることもできます。
しかし、テーブルを使用して実装するのは好きではないので、どうすればよいでしょうか?錯視で実装する方法や、JSコントロールを使って高さを揃える方法、コンテナのオーバーフロー部分を非表示にして列の下端のマイナスと内側のプラスの境界線を組み合わせる方法など、実装方法はいろいろあります。同じ列の高さの問題を解決するパッチ。
実際には、display:table、display:table-row、display:table-cell を使用して実現できる簡単な方法があり、高さの低いコンテナは比較的高さのコンテナに適応しますが、IEはこの属性をサポートしていません。今のところ IE を責める必要はありません。将来的には改善されると思います。ここで模型を作りました。

まず、xhtml の構造を見てみましょう:

説明しなくても非常に簡単ですが、テーブル構造は次のとおりです。よく似ていますか?














以下は css:
.equal {
display:table;
border-collapse: Separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
.row .one {
width:200px;
}
.row .two {
width:200px;
}
.row .three {

}

説明:
1.dispaly:table; として、layer.equal を使用します。ブロック レベル 要素のテーブル表示は、テーブルとして扱われます。
2.border-collapse: Separate; テーブルがセルを結合する前と同様に、境界線は独立しています。
3.display:table-row; .row をテーブルの行として扱います tr 表示
4.display:table-cell; .row の下位レベルの div をテーブルのセル td
5 として表示します。次に、幅 Border-spacing を定義します。 :10px は、ここでも複数のボックスを区別するために使用されます。上記のように、IE では正常に表示できませんが、Mozilla 1.6、Opera 7.50、Safari 1.2.2、Firefox 0.8、OmniWeb 5b、Camino では表示できます。 0.8b、およびテスト後の Netscape 7.1。完璧な表示。これでミッション全体が終了しました。