divを使ってテーブル風レイアウトメソッドを実装する_エクスペリエンス交換

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

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

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









以下は CSS です:
.equal {
表示:テーブル;
ボーダー折りたたみ:分離;
}
.row {
表示:テーブル行;
}
.row div { ディスプレイ:テーブルセル;
}
.row .one {
幅:200px;
}
.row .two {
幅:200px;
}
.row .three {

}

説明:

1.dispaly:table; レイヤー .equal をブロックのテーブル table として表示させます。レベル要素、つまりテーブルとして扱います
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 テスト後。