CSS3 の複数列レイアウトの列の関連プロパティについて

CSS3 は、複数段レイアウトを実装できる 属性を追加しました

以前の実装は非常に面倒で、さまざまな配置が必要になる可能性があります
今では、それを実現するために必要な属性は 1 つだけです
複数段レイアウトは、新聞のレイアウトに似ています
これにより、読者は見やすくなります

複数の段数と複数の段幅

1行のテキストが長すぎると、このように読みたくなくなる可能性があります

<p class="demo">......</p>

rreeee

---

複数段数値 column-countを指定できます 必要な列の数
ブラウザが自動的に適切な列幅を設定します

.demo {    width: 600px;    height: 200px;    border: 1px solid black;}

---

列の数を指定せずに、column-widthを使用して列幅を設定することもできます列
これは上記のコードと同等です

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    column-count: 3; /*增*/}

場合、設定された幅の値が要素全体を埋めるのに十分でない場合、ブラウザは列数が要素全体を埋めることができるように最大の幅を使用しようとします。
たとえば、上記の 11em を 10em に変更すると、ブラウザも 3 列レイアウトで表示されます

多くの略語があります 列構文

column-count と column-width を複合属性列に組み合わせることができます

この属性を使用して列幅、列数、またはその両方を設定できます
しかし、一般的には、属性の 1 つを設定するだけでニーズを満たすことができます。要件

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    column-width: 11em; /*改*/}

列ギャップ幅

複数の列の間にはこのギャップがあります。列のレイアウト

デフォルトのギャップは 1em です
列のギャップは、column-gap 属性を通じて制御できます

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    columns: 3;    /*或者columns: 11em;*/
    /*或者columns: 11em 3;*/}

列のギャップが大きすぎると、テキストがオーバーフローすることに注意してください

そのため、適切な数で制御する必要がありますcolumns

要素は列にまたがります

テキストにtitle要素を追加し、高さを変更しました

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    columns: 3;    column-gap: 2em; /*增*/}

<p class="demo"><h1>Angel Beats</h1>......</p>

デフォルトでは、h1要素は最初の列のみを占めます
複数の上に置きたい場合コラム、どうすればいいですか？

---

h1要素のスタイルを設定します

.demo {    width: 600px;    height: 280px;/*改*/
    border: 1px solid black;    columns: 3;}

column-spanは、要素がまたがる列の数を指定できます

allに設定すると、要素がすべての列にまたがるようにできます

列間隔。 style

場合、列の間にスペースを入れるだけでは退屈だと思いませんか? この属性は、column-rule を介して列の間隔を積み重ねることによって設定できます。サブ属性は次のとおりです

。

column-rule-width

• column-rule-style

• column-rule-color

• は、border属性を設定する方法と少し似ています

h1 {    column-span: all; <--
    text-align: center;}

この方法では、列の間には 1 ピクセル幅の黒い実線が使用されます

ピクセルの設定に加えて、column-rule-width には 3 つの幅を設定するための 3 つのキーワードもあります。次のキーワード


none none


• hidden Hide

• 点線

• 点線点線

• 実線実線

• 二重二重

• groove 3D 溝ルールを定義します

• ridge 3D リッジルールを定義します

• in

  set

  3D インセットルールを定義します

• outset 3D アウトセットルールを定義します

• 最後の 4 つの効果は、幅と色の値に依存します
  まず理解しましょう。
CSS3 の複数列レイアウトはあまり使用されていません
、それでも最も基本的な属性を知る必要があります

以上がCSS3 の複数列レイアウトの列の関連プロパティについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。