html - CSS を使用した 2 列の記事

Question

新聞記事のように、(2 div ではなく) 自動的に 2 列に単一の投稿をしたいと思います。これを達成する方法はありますか？

Answer 1

CSS3を使えばできます。特にその目的に役立つ「Multi-Column Layout」と呼ばれる新しいモジュールがあります。W3C 勧告へのリンクは次のとおりです。

現在、Firefox、Safari、Chrome、Opera、および Inernet Explorer 10 で使用できます。この Web ページを参照して、いくつかのブラウザー バージョン間での CSS3 推奨事項の互換性を確認してください。

テキストは 1 つの列から別の列に流れるはずであり、ページ デザインで 2 つの列を偽造するために 2 つの異なる DIV を使用する必要はありません。この方法で複数の列を適用できます。

column-count: 2;
column-gap: 15px;
column-rule: 1px solid black;

-moz-column-count: 2;
-moz-column-gap: 15px;
-moz-column-rule: 1px solid black;

-webkit-column-count: 2;
-webkit-column-gap: 15px;
-webkit-column-rule: 1px solid black;

各メイン レンダリング エンジン (Mozilla の gecko や Chrome の Webkit など) は、これをサポートするために独自のプロパティを作成しています。そのため、異なる接頭辞 -webkit と -moz を使用する必要があります。

それとは別に、(列数の代わりに) 列の幅を指定することもできます:

-moz-column-width: 300px;
-moz-column-gap: 15px;

-moz-column-width: 300px;
-moz-column-gap: 15px;

-webkit-column-width: 300px; 
-webkit-column-gap: 15px;

いずれにせよ、おそらく複数の DIV を使用することをお勧めします。悲しいことに、Internet Explorer 9 以前では、この豪華なマルチカラム マジックをすべてサポートしていないからです。