css - CSS列と フローティングカラム

Question

HTMLページには、3つの段落のテキスト（それぞれpタグ内）があり、それらを隣り合わせの列として表示したいと思います。

CSS3の列は、適切な場所で魔法のように分割して均等な分割/高さを作成するのに最適ですが、列の長さに応じて段落が前の列の下部から始まり、見苦しいレイアウトになります。

この状況では、CSS3列の使用は完全に間違っていますか？代わりにdivタグを使用する必要がありますか？floatまたは、最善のアプローチは何ですか？

Answer 1

p要素が親要素によってラップされていると仮定するとdiv、次のように動作するはずです。

div {
    -moz-column-width: 12em; /* or whatever width you prefer... */
    -ms-column-width: 12em;
    -o-column-width: 12em;
    -webkit-column-width: 12em;
    column-width: 12em;
}

div p {
    -moz-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
}

JS Fiddle demoは、Chromium 22/Ubuntu 12.10 でのみテストされています。

column-break-inside: avoid規則 (およびベンダー接頭辞付きの同等のもの) は、2 つ以上の列にまたがって要素を分割しないようにブラウザーに効果的に指示します。各要素を完全に1 つのp列内に厳密に配置するために、同じ高さの列を効果的に破棄しますが、状況によっては、複数の要素を 1 つの列内に配置することもできます。p

厳密にp列ごとに 1 つを適用する場合は、代わりにcolumn-break-before: always;またはcolumn-break-after: always;ルールを使用できます。

参考文献:

• W3C の CSS マルチカラム レイアウト モジュール。