CSS3 チュートリアル - 複数の列

こんにちは！皆さん、前回の記事で CSS3 チュートリアルとアニメーションの知識を理解しましたか? CSS3 で登場した新しい複数列レイアウト (マルチカラム) は、従来の HTML Web ページのブロック レイアウト モードを強力に拡張したものです。この新しい構文により、WEB フロントエンド開発者は複数の列にテキストを簡単に表示できるようになります。

CSS3 複数の列:

CSS3 を使用すると、新聞のように複数の列を作成してテキストをレイアウトできます。

この章では、次の複数列属性を学習します:

1、列数、

2、列ギャップ、

3、列ルール。

ブラウザのサポート:

Internet Explorer 10 と Opera は複数列属性をサポートします。

Firefox には接頭辞 -moz- が必要です。

Chrome と Safari には接頭辞 -webkit- が必要です。

注: Internet Explorer 9 以前は複数列属性をサポートしていません。

CSS3 は複数の列を作成します:

column-count 属性は要素を区切る列の数を指定します:

例:

div 要素内のテキストを 3 つの列に分割します:

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

CSS3 は間隔を指定します列間:

column-gap 属性は列間のギャップを指定します:

例:

は列間の 40 ピクセルのギャップを指定します:

div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}

CSS3 列ルール:

column-rule 属性は幅、スタイル、色のルールを設定します。

例:

列間の幅、スタイル、色の規則を指定します:

div
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}

新しい複数列プロパティ:

次の表に、すべての変換プロパティをリストします:

上記は CSS3 チュートリアル - 複数列です。関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。