css3_html/css_WEB-ITnoseの複数列レイアウト列の詳細説明

columns 構文: columns: [ column-width ] || [ column-count ]
オブジェクトの列数と各列の幅を設定または取得します

ここで: [ column-width ]: 設定または取得しますオブジェクトの各列の列数 width; [column-count]: オブジェクトの列数を設定または取得します。

css コード:

body{font:14px/1.5 georgia,serif,sans-serif;}p{margin:0;padding:5px 10px;background:#eee;}h1{margin:10px 0;font-size:16px;}.test{    width:628px;    border:10px solid #000;    -moz-columns:200px 3;    -webkit-columns:200px 3;    columns:200px 3;}.test2{    border:10px solid #000;    -moz-columns:200px;    -webkit-columns:200px;    columns:200px;}

html コード:

<h1>列数及列宽固定:</h1><div class="test">    <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>    <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p></div><h1>列宽固定，根据容器宽度液态分布列数:</h1><div class="test2">    <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>    <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p></div>

結果は図に示すとおりです。

以下は、column
1.column-width: で使用される関連属性のリストです。オブジェクトの各列を設定または取得します。 -moz-column-width:200px;

2.column-count: のように、オブジェクトの列数を自動設定または取得します。 : -webkit-column-count:3;

3 .column-gap: Normal オブジェクトの列間のギャップを設定または取得します

例: column-gap:normal;column-gap:40px;

4.column-rule:[ column-rule -width ] || [ column-rule-style ] || [ column-rule-color ] オブジェクトの列間の境界線を設定または取得します。複合プロパティ。 border 属性と同等です

例: column-rule:10px Solid #090;

5.column-span: none | オブジェクト要素がすべての列にまたがるかどうかを設定または取得します。

例: column-span:all;

6.column-fill: auto |balance オブジェクトのすべての列の高さが均一であるかどうかを設定または取得します。

auto: 列の高さ適応コンテンツ

balance: すべての列の高さが最も高いものに統一されます
例: column-fill:balance;
7.column-break-before: auto | always | | ページ | 回避ページ | オブジェクトを設定または取得する前に改行するかどうか。

auto: 要素の前での改行と新しい列の作成を強制も禁止もしない

always: 常に要素の前で改行し、新しい列を作成する

avoid: 要素の前での改行と新しい列の作成を避ける

8.column-break -after: auto | always | 回避 | ページ 回避 | オブジェクトを設定または取得した後に改行するかどうか。

auto: 要素の後に改行と新しい列の作成を強制も禁止もしない

always: 要素の後に常に改行と新しい列の作成

avoid: 要素の後に改行と新しい列の作成を避ける

9.column-break -inside: auto |avoid |avoid-column オブジェクト内で改行するかどうかを設定または取得します。

auto: 要素内での改行と新しい列の生成を強制したり禁止したりしません

実際、最初の 5 つの項目は一般的に使用されます。