CSS3 Columns は便利な列形式のレイアウトです

CSS は HTML マークアップ言語のスタイル記述を提供し、その中の要素がどのように表示されるかを定義します。 CSS は Web デザインの分野における画期的な技術です。これを使用して小さなスタイルを変更し、それに関連するすべてのページ要素を更新できます。 CSS では常に頭の痛い問題がありました。それは、レイアウトを作成するのが面倒であるということです。もちろん、さまざまなレイアウトを作成する方法やテクニックはたくさんありますが、レイアウトをより適切に管理できるように、CSS がいくつかの新しいプロパティを提供する必要があると常に感じています。幸いなことに、CSS3 には列レイアウトを作成するための新しい列属性のバッチが用意されており、これらの属性を使用すると、制御に float、clear、margin などの属性を使用する必要がなくなり、多くの問題を回避できます。

CSS コード

CSS3 の列シリーズ属性は、さまざまな機能を提供します。これらを組み合わせて使用​​すると、対応する列レイアウトを取得できます。

column-count: 列の数

column-gap: ギャップの幅。各列の間

column-width: 推奨される幅は使用されない可能性があります。ブラウザはこの値に基づいて計算します

column-rule-width: 列間の分割線の幅

column-rule-style: columns 列間の区切り線のスタイル

column-rule-color: 列間の分割線のデモンストレーション

column-span: 要素の幅を複数の列にまたがることを許可します

column-fill: 列の分割方法

列レイアウトでは、少なくとも column-count と column-gap を使用する必要があります:

/* 3 列、各列間の間隔は 10px */ul.col-3 {

column-count: 3;
column-gap: 10px;}

列間のスペースを美しくしたい場合ギャップ、これも非常に簡単です:

/* 3 列、各列間の間隔は 10 ピクセル、金色の分離線あり */ul.col-3 {

column-count: 3;
column-gap: 10px;
column-rule: 1px solid #fc0;}

指定された要素は複数の列にまたがることもできます:

/ * 次の HTML を例に挙げます。

<div>
<h3>表头!</h3>
<div>列 1</div>
<div>列 2</div>
<div>列 3</div>
<div>列 4</div>
<div>列 5</div>
<div>列 6</div>
<div>列 7</div>
<div>列 8</div>
<div>列 9</div>
<div>列 10</div>
<div>列 11</div>
<div>列 12</div>
</div>

*/div.col-3 {
column-count: 3;
column-gap: 5px;}div.col-3 h2 {
column-span: all;
text-align:center;
background: #eee;}

は非常にシンプルで、表示される結果は期待どおりです。

CSS3 列を使用してページ レイアウトを作成することには、多くの利点があります。幅を計算する必要がなく、コンテンツによってレイアウトが崩れるかどうかを心配する必要もありません。これらの数学的問題はシステムが自動的に計算します。もう 1 つは、明確できちんとしたセマンティクスです。

上記の内容はCSS3カラム作成のページレイアウトに関するもので、皆様のお役に立てれば幸いです。

関連する推奨事項:

CSS3 と JS を使用して上昇する正方形の動的背景を作成する方法

CSS3 の主な機能アプリケーション

CSS3 でレスポンシブ レイアウトを作成する方法

以上がCSS3 Columns は便利な列形式のレイアウトですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。