css3の複数列レイアウトとは何ですか? columns 属性の概要 (例)-CSSチュートリアル-php.cn

css3の複数列レイアウトとは何ですか? columns 属性の概要 (例)

青灯夜游

リリース： 2018-09-11 11:35:35

オリジナル

3488 人が閲覧しました

この章では、CSS3 の複数列レイアウトとは何ですか? columns 属性の紹介(例)は、困っている方の参考になれば幸いです。

1. 複数列レイアウトとは何ですか?

CSS3 の新しい複数列レイアウト (複数列) は、従来の HTML Web ページのブロックレイアウトモードを強力に拡張したものです。この新しい構文により、WEB 開発者は複数の列にテキストを簡単に表示できます。テキストの行が長すぎると、読者が読みにくくなり、間違った行を読んだり、人の目がテキストの一方の端からもう一方の端に移動したり、続けて読んだりする可能性があることがわかっています。次の行の先頭眼球の動きが大きすぎると、注意力が低下し、簡単に読めなくなります。したがって、大画面ディスプレイを最大限に効率的に使用するには、新聞のニュースのレイアウトのように、文字の幅を制限し、文字を複数段で表示できるページデザインが必要です。例:

css3の複数列レイアウトとは何ですか? columns 属性の概要 (例)

2. 列属性の紹介と使い方

1. 複数の列を作成します(列数と列幅)
テキストを表示する列の数に関係なく、必要なのは、column-count と column-width という 2 つの属性だけです。

column-count 属性は、特定の列数を設定します。例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>多列布局</title>
		<style type="text/css">
			.demo{
				width: 500px;
				height: 100px;
				margin: auto;
				-moz-column-count:2; /* Firefox */
				-webkit-column-count:2; /* Safari and Chrome */
				column-count:2;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
		</div>
	</body>
</html>

ログイン後にコピー

Rendering:

css3の複数列レイアウトとは何ですか? columns 属性の概要 (例)

column-width 属性は、列の幅を制御します。 column-count 属性の値を指定しない場合、ブラウザはテキストを適切な数の列に分割することを独自に決定します。例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>多列布局</title>
		<style type="text/css">
			.demo{
				width: 500px;
				height: 100px;
				margin: auto;
				column-width:100px;
				-moz-column-width:100px; /* Firefox */
				-webkit-column-width:100px; /* Safari and Chrome */
			}
		</style>
	</head>

	<body>
		<div class="demo">
			CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
		</div>
	</body>
</html>

ログイン後にコピー

Rendering:

css3の複数列レイアウトとは何ですか? columns 属性の概要 (例)

2. 複数の列の列間のギャップ (column-gap 属性)

column-gap 属性は、列間のギャップを指定します。デフォルトでは、このギャップの幅は 1em ですが、column-gap 属性を使用すると、デフォルトの幅値が変更されます:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>多列布局</title>
		<style type="text/css">
			.demo{
				width: 500px;
				height: 150px;
				margin: auto;
				-moz-column-count:3; /* Firefox */
				-webkit-column-count:3; /* Safari and Chrome */
				column-count:3;
			
				-moz-column-gap:40px; /* Firefox */
				-webkit-column-gap:40px; /* Safari and Chrome */
				column-gap:40px;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
		</div>
	</body>

</html>

ログイン後にコピー

レンダリング:

css3の複数列レイアウトとは何ですか? columns 属性の概要 (例)

3. 使用法:

Column-rule: 境界線の太さ、色、スタイル。column-rule 属性の使用法は、border 属性の使用法と似ており、並行して使用できます。

例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>多列布局</title>
		<style type="text/css">
			.demo{
				width: 500px;
				height: 150px;
				margin: auto;
				-moz-column-count:3; /* Firefox */
				-webkit-column-count:3; /* Safari and Chrome */
				column-count:3;
			
				-moz-column-gap:40px; /* Firefox */
				-webkit-column-gap:40px; /* Safari and Chrome */
				column-gap:40px;
				
				-webkit-column-rule: 1px solid #0188FB; /* Chrome, Safari, Opera */
			    -moz-column-rule: 1px solid #0188FB; /* Firefox */
			    column-rule: 1px solid #0188FB;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
		</div>
	</body>

</html>

ログイン後にコピー

レンダリング:

4. 列の高さのバランス css3の複数列レイアウトとは何ですか? columns 属性の概要 (例)

CSS3 仕様では、各列の高さのバランスが取れており、各列の塗りつぶしの量がブラウザによって自動的に調整されると説明されています。、各列の高さを一定に保つために、テキストを均等に分割します。ただし、場合によっては、列の最大高さを設定する必要があります。このとき、テキストの内容は最初の列から埋められ、次に 2 列目、3 列目と続き、場合によってはそれ以降の列は埋められません。またはオーバーフローします。したがって、高さまたは max-height 属性値が複数列レイアウトに設定されている場合、コンテンツの量、十分であるか超過しているかに関係なく、列は指定された高さまで拡張されます。

CSS3 の複数列レイアウト (列) は、Web フロントエンド開発者がワイドスクリーンディスプレイを効率的に利用できるようにする非常に便利な機能です。これらは多くの場所、特に列の高さのバランスを自動的に調整する必要がある場所で必要になることがわかります。

以上がcss3の複数列レイアウトとは何ですか? columns 属性の概要 (例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。