HTMLページには、3つの段落のテキスト(それぞれp
タグ内)があり、それらを隣り合わせの列として表示したいと思います。
CSS3の列は、適切な場所で魔法のように分割して均等な分割/高さを作成するのに最適ですが、列の長さに応じて段落が前の列の下部から始まり、見苦しいレイアウトになります。
この状況では、CSS3列の使用は完全に間違っていますか?代わりにdiv
タグを使用する必要がありますか?float
または、最善のアプローチは何ですか?
HTMLページには、3つの段落のテキスト(それぞれp
タグ内)があり、それらを隣り合わせの列として表示したいと思います。
CSS3の列は、適切な場所で魔法のように分割して均等な分割/高さを作成するのに最適ですが、列の長さに応じて段落が前の列の下部から始まり、見苦しいレイアウトになります。
この状況では、CSS3列の使用は完全に間違っていますか?代わりにdiv
タグを使用する必要がありますか?float
または、最善のアプローチは何ですか?
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;
ルールを使用できます。
参考文献: