第 28 章 CSS3 複数列レイアウト_html/css_WEB-ITnose

学習ポイント:

1. 初期の複数列の問題

2. プロパティの説明

講師: Li Yanhui

この章では主に CSS3 について説明しますHTML5 では複数列レイアウトが提供されており、複数列レイアウトを使用して、流動的な複数列レイアウトを簡単に作成できます。

1 つ。初期の複数列の問題

新聞や雑誌のような複数列 (少なくとも 2 列、通常は 3 列以上) でレイアウトしたい場合がありますが、初期の CSS が提供するレイアウト方法には大きな制限があります。ソリッド レイアウトの場合は、フローティング レイアウトまたは位置決めレイアウトを使用して実行できます。ただし、流体の複数の列 (3 列以上など) の場合は、フローティング レイアウトのみを使用でき、大きな制限があります。ブロックベースであるため、動的コンテンツに拡張したり適応したりすることは基本的に不可能です。

//コンテンツの 5 つの段落、3 つの列に分かれています

<div>    <p>        我是第一段内容....省略的部分复制大量文本    </p>    <p>        我是第二段内容....省略的部分复制大量文本    </p>    <p>        我是第三段内容....省略的部分复制大量文本    </p>    <p>        我是第四段内容....省略的部分复制大量文本    </p>    <p>        我是第五段内容....省略的部分复制大量文本    </p></div>

//タイトル付きの 5 つの段落のコンテンツ、3 つの列に分かれています

<div>    <h4 id="第一段标题">第一段标题</h4>    <p>        我是第一段内容....省略的部分复制大量文本    </p>    <h4 id="第二段标题">第二段标题</h4>    <p>        我是第二段内容....省略的部分复制大量文本    </p>    <h4 id="第三段标题">第三段标题</h4>    <p>        我是第三段内容....省略的部分复制大量文本    </p>    <h4 id="第四段标题">第四段标题</h4>    <p>        我是第四段内容....省略的部分复制大量文本    </p>    <h4 id="第五段标题">第五段标题</h4>    <p>        我是第五段内容....省略的部分复制大量文本    </p></div>

ご希望の場合は、2 つのコンテンツのセットをお届けします流動性を実現するためにフローティングとポジショニングを使用する 3 列では基本的に不可能です。また、実際のアプリケーションでは要件が異なる場合があります。4 列または 5 列に変更する必要がありますか?したがって、CSS3 は、この動的変換機能を実現するために、複数列のレイアウト属性列を提供します。

Ⅱ。属性とバージョン

CSS3 は、次のように、列複数列レイアウト属性を含む 7 つの属性セットを提供します。

コラム

統合2 つの属性 column-width と column-count column-count 列の数を定義します列のギャップ列のルール列 -spancolumn-fill列属性セットがサポートされていないため幸いなことに、主流のブラウザはこれを十分にサポートしています。以下は、主流ブラウザのサポートとプレフィックスのステータスです。 Safari

column-width	は各列の幅を定義します
列の間隔を定義する
列の境界線を定義する
は、サブ要素のスパンを定義します複数列レイアウト 列効果、Firefox はサポートしていません
各列の列高さ効果を制御します。主流のブラウザはサポートしません
	Opera
Firefox	Chrome

IEなし10.0+ 上記の表から、最新のブラウザですべての効果を実現するには、プレフィックスを使用する必要があることがわかります。

-webkit-columns: 150px 4;-moz-columns: 150px 4;columns: border-box;

デモンストレーションの便宜上、Firefox でテストし、デモンストレーションには -moz- プレフィックスのみを使用しました。

-moz-columns: auto 4;

	サポートにはプレフィックスが必要です	11.5 ~ 29	2 ~ 40	4 ~ 45	3.1 ~ 8
	プレフィックスなしをサポート	なし	なし	なし	なし
	//フルフォーム		Three.プロパティの説明	1.columns	columns は、columns-width と columns-count の省略形を含む複合属性です。列数と列幅を同時に設定することを意味します。 // 4 つの列に分割され、各列の幅は適応的です

2.column-width

column-width 属性は、各列の幅を設定するために使用されます。

//列幅を設定します

-moz-column-width: 200px;

ここでは 200px が設定されています。これは最小幅のようなものです。ブラウザを200以下に拡大すると1カラム表示になります。自動の場合は、常に 4 つの列が維持されます。

属性

説明

auto

デフォルト値、適応。

長さの値

列の幅を設定します。

3.column-count

column-count 属性，用于设置多少列。

//设置列数

-moz-column-count: 4;

属性值	说明
auto	默认值，表示就 1 列。
数值	设置列数。

4.column-gap

column-gap 属性，用于设置列间距

//设置列间距

-moz-column-gap: 100px; 

属性值	说明
auto	默认值，表示就 1 列。
数值	设置列数。

5.column-rule

column-rule 属性，设置每列中间的分割线//设置列边线

-moz-column-rule: 2px dashed gray; 

属性	说明
column-rule	的边框简写形式。
column-rule-width	单独设置边框宽度。
column-rule-style	单独设置边框的样式。
column-rule-color	单独设置边框的颜色。

列边线不会影响到布局，它会根据布局的缩放自我调整是否显示。如果我们把页面缩放到只能显示一列时，它自动消失了。

6.column-span

column-span 属性，设置跨列大标题。

//跨列标题，由于火狐尚未支持，固使用 webkit

-webkit-column-span: all; 

属性	说明
none	默认值，表示不跨列。
all	表示跨列。