以下は私が記事を理解した上で翻訳したものです。私の目的は、この CSS スキルを伝えることだけです。
多くの Web デザイナーは、複数の列の位置を制御する古典的なテーブル レイアウトのセルと同じように、2 つ以上のコンテナを同じ高さに並べて配置し、その中に各コンテナのコンテンツを表示することを好みます。また、コンテナの利便性も気に入っています。コンテンツは中央揃えまたは上揃えで表示されます。
しかし、それを実装するためにテーブルを使用したくない場合は、どうすればよいでしょうか?錯視で実装する方法や、JSコントロールを使って高さを揃える方法、コンテナのオーバーフロー部分を非表示にして列の下端のマイナスと内側のプラスの境界線を組み合わせる方法など、実装方法はいろいろあります。同じ列の高さの問題を解決するパッチ。
実際には、display:table、display:table-row、display:table-cell を使用して実現できる簡単な方法があり、高さの低いコンテナは比較的高いコンテナに適応しますが、IE はサポートしていません。この属性は、今のところ IE を責めるつもりはありませんが、将来的には改善されると信じています。ここで模型を作りました。
まず、 xhtml の構造を見てください。
<div class=equal>
<div クラス=行>
<div class=one></div>
<div class=two></div>
<div class=three></div>
</div>
</div>
説明しなくても非常に簡単ですが、テーブル構造がこれにありますが、よく似ていますか？
<テーブル>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</テーブル>
CSSは次のとおりです。
。等しい {
表示:テーブル;
ボーダー折りたたみ:分離;
}
。行 {
表示:テーブル行;
}
.row div {
表示:テーブルセル;
}
.row .one {
幅:200ピクセル;
}
.row .two {
幅:200ピクセル;
}
.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.8。 b、テスト後、Netscape 7.1 は完全に表示されます。