CSS3 の複數(shù)列プロパティ
CSS3 の新しい複數(shù)列レイアウトは、従來の HTML Web ページのブロック レイアウト モードを強力に拡張したものです。この新しい構(gòu)文により、WEB 開発者は複數(shù)の列にテキストを簡単に表示できます。テキストの行が長すぎると、読者が読みにくくなり、間違った行を読んだり、人の目がテキストの一方の端からもう一方の端に移動したり、続けて読んだりする可能性があることがわかっています。次の行の先頭の場合 眼球の動きが大きすぎると、注意力が低下し、簡単に読めなくなります。したがって、大畫面ディスプレイを最大限に効率的に使用するには、新聞のニュースのレイアウトのように、文字の幅を制限し、複數(shù)の段に文字を表示できるページ デザインが必要です。 Attributes。
column-fill 列の塗りつぶし方法を指定します column-gap 列間のギャップを指定します
column-rule-color 2 つの列間の境界線を指定します
column-rule-style の色は 2 つの列間の境界線のスタイルを指定します
column-rule-width は 2 つの列間の境界線の太さを指定します
column-span は要素がまたがる列の數(shù)を指定します
列幅は列の幅を指定します
columns 列幅と列數(shù)を設定するための略語です
列レイアウトを備えたブラウザは完全に互換性があります複數(shù)列レイアウト機能をサポートしていない一部のブラウザの場合、 IE9/IE8 と同様、これらの屬性はすべて無視されるため、レイアウトは従來の単一ブロック レイアウトになります。 ブラウザーの互換性を最大限に高めるために、複數(shù)列のレイアウト屬性を使用する場合、最も基本的なブラウザー エンジンのプレフィックスは、Google Chrome の場合は -webkit-、Firefox の場合は - です。 ms- は IE ブラウザで、最後にプレフィックスなしで記述することを忘れないでください。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
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;
}
</style>
</head>
<body>
<h1>列數(shù)及列寬固定:</h1>
<div>
<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>列寬固定，根據(jù)容器寬度液態(tài)分布列數(shù):</h1>
<div>
<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>
</body>
</html> 例: -webkit-column-count:3;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.columns{width:300px;}
.columns .title{margin-bottom:5px; line-height:25px; background:#f0f3f9; text-indent:3px; font-weight:bold; font-size:14px;}
.columns .column_count{
-webkit-column-count:3;
-moz-column-count:3;
}
</style>
</head>
<body>
<div>columns-count</div>
<div>
據(jù)俄羅斯《消息報》19日報道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機近日抵達位于莫斯科近郊的葛羅莫夫試飛院。
根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進行的蘇-35飛行培訓。俄方曾表示，首批4架蘇-35將于年底前交付中國，
預計屆時在俄羅斯完成培訓的中國飛行員將直接駕機回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>
<length> オブジェクトの列間のギャップを設定または取得します
例: column-gap:normal;column-gap:40px;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.columns{width:300px;}
.columns .title{margin-bottom:5px; line-height:25px; background:#f0f3f9; text-indent:3px; font-weight:bold; font-size:14px;}
.columns .column_gap{
-webkit-column-count:2;
-moz-column-count:2;
-webkit-column-gap:40px;
-moz-column-gap:40px;
}
</style>
</head>
<body>
<div>columns-gap</div>
<div>
據(jù)俄羅斯《消息報》19日報道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機近日抵達位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進行的蘇-35飛行培訓。俄方曾表示，首批4架蘇-35將于年底前交付中國，預計屆時在俄羅斯完成培訓的中國飛行員將直接駕機回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>列ルール:
[ カラムルール幅 ] || [ カラムルールスタイル ] || [ カラムルールカラー ] オブジェクトの列間の境界線を設定または取得します。複合プロパティ。 border 屬性と同等です
例: column-rule:10px Solid #090;
column-rule-width 屬性は 2 つの列の境界線の太さを指定します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.newspaper
{
column-count:3;
column-gap:40px;
column-rule-style:outset;
column-rule-width:10px;
/* Firefox */
-moz-column-count:3;
-moz-column-gap:40px;
-moz-column-rule-style:outset;
-moz-column-rule-width:10px;
/* Safari and Chrome */
-webkit-column-count:3;
-webkit-column-gap:40px;
-webkit-column-rule-style:outset;
-webkit-column-rule-width:3px;
}
</style>
</head>
<body>
<div class="newspaper">
據(jù)俄羅斯《消息報》19日報道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機近日抵達位于莫斯科近郊的葛羅莫夫試飛院。
根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進行的蘇-35飛行培訓。俄方曾表示，首批4架蘇-35將于年底前交付中國，
預計屆時在俄羅斯完成培訓的中國飛行員將直接駕機回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>column-rule-style 屬性は 2 つの列の間の太さを指定しますcolumns 境界線のスタイル:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.newspaper
{
column-count:3;
column-gap:40px;
column-rule-style:dashed;
/* Firefox */
-moz-column-count:3;
-moz-column-gap:40px;
-moz-column-rule-style:dashed;
/* Safari and Chrome */
-webkit-column-count:3;
-webkit-column-gap:40px;
-webkit-column-rule-style:dashed;
}
</style>
</head>
<body>
<div class="newspaper">
據(jù)俄羅斯《消息報》19日報道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機近日抵達位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進行的蘇-35飛行培訓。俄方曾表示，首批4架蘇-35將于年底前交付中國，預計屆時在俄羅斯完成培訓的中國飛行員將直接駕機回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>column-rule-color 屬性は、2 つの列の境界線の色を指定します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.newspaper
{
column-count:3;
column-gap:40px;
column-rule-style:outset;
column-rule-color:blue;
/* Firefox */
-moz-column-count:3;
-moz-column-gap:40px;
-moz-column-rule-style:outset;
-moz-column-rule-color:blue;
/* Safari and Chrome */
-webkit-column-count:3;
-webkit-column-gap:40px;
-webkit-column-rule-style:outset;
-webkit-column-rule-color:blue;
}
</style>
</head>
<body>
<div class="newspaper">
據(jù)俄羅斯《消息報》19日報道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機近日抵達位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進行的蘇-35飛行培訓。俄方曾表示，首批4架蘇-35將于年底前交付中國，預計屆時在俄羅斯完成培訓的中國飛行員將直接駕機回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>要素がまたがる列の數(shù)を指定します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.newspaper
{
column-count:4;
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
}
h3
{
column-span:all;
-webkit-column-span:all; /* Safari and Chrome */
}
</style>
</head>
<body>
<h3>最新軍事消息</h3>
<div class="newspaper">
據(jù)俄羅斯《消息報》19日報道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機近日抵達位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國飛行員在俄進行的蘇-35飛行培訓。俄方曾表示，首批4架蘇-35將于年底前交付中國，預計屆時在俄羅斯完成培訓的中國飛行員將直接駕機回國，而且很可能回國就能形成戰(zhàn)斗力。
</div>
</body>
</html>列の幅を指定します
column-width 屬性は、要素の幅を指定しますコラム。
りー
