CSS3 列: table_html/css_WEB-ITnose よりも便利な列形式のレイアウト方法

CSS では常に頭の痛い問題がありました。それは、レイアウトを作成するのが非常に面倒だということです。もちろん、さまざまなレイアウトを作成する方法やテクニックはたくさんありますが、レイアウトをより適切に管理できるように、CSS がいくつかの新しいプロパティを提供する必要があると常に感じています。幸いなことに、CSS3 には列レイアウトを作成するための新しい列属性のバッチが用意されており、これらの属性を使用すると、制御に float、clear、margin などの属性を使用する必要がなくなり、多くの問題を回避できます。

デモを見る

CSS コード

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

• column-count : 列番号
• column-gap : 列間のギャップの幅
• column-width : 推奨される幅は使用されない場合があります。ブラウザはこの値に基づいて計算します
• column-rule-width : 列間の区切り線の幅
• column-rule-style : 列間の区切り線のスタイル
• column-rule-color : 列間の区切り線の色
• column-span : 要素の幅が複数の列にまたがることを許可します
• column-fill : 列の配置

美しい列レイアウトを作成するには、少なくとも columns-count と columns-gap を使用する必要があります:

/* 3 列，每列之间10px间距 */ul.col-3 {	column-count: 3;	column-gap: 10px;}

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

/*  3 列，每列之间10px间距 ，带有金色的隔离线 */ul.col-3 {	column-count: 3;	column-gap: 10px;	column-rule: 1px solid #fc0;}

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

/* 以下面的HTML为例:<div class="col-3">	<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 つは、明確できちんとしたセマンティクスです。