Ciri berbilang lajur CSS3
Susun atur berbilang lajur baharu dalam CSS3 ialah pengembangan hebat mod susun atur blok dalam halaman web HTML tradisional. Sintaks baharu ini membolehkan pembangun WEB memaparkan teks dalam berbilang lajur dengan mudah. Kami tahu bahawa apabila baris teks terlalu panjang, pembaca akan menjadi lebih sukar untuk membaca, dan mereka mungkin membaca baris yang salah atau membaca secara bersiri; permulaan baris seterusnya Jika bola mata Jika pergerakan terlalu besar, perhatian mereka akan berkurangan dan mereka akan mudah tidak dapat membaca. Oleh itu, untuk menggunakan paparan skrin besar dengan kecekapan maksimum, reka bentuk halaman perlu mengehadkan lebar teks dan membenarkan teks dibentangkan dalam berbilang lajur, sama seperti susun atur berita dalam akhbar.
<<> Atribut Huraikan
Column-Count elemen ditentukan yang harus dibahagikan kepada bilangan lajur.
isi lajur Nyatakan cara mengisi lajur
jurang lajur Nyatakan jurang antara lajur
peraturan lajur Semua peraturan lajur- * Singkatan atribut
column-rule-color Menentukan warna sempadan antara dua lajur
column-rule-style Menentukan gaya sempadan antara dua lajur
lajur -rule- width Nyatakan ketebalan sempadan antara dua lajur
lajur-span Nyatakan bilangan lajur elemen harus menjangkau
lebar lajur Nyatakan lebar lajur
lajur Tetapkan lebar lajur dan lajur- Singkatan untuk kiraan
Serasi sempurna dengan penyemak imbas reka letak lajur
Untuk sesetengah penyemak imbas yang tidak menyokong reka letak berbilang lajur ciri, seperti IE9/IE8, Atribut ini semuanya diabaikan, jadi reka letak muncul sebagai susun atur monolitik tradisional.
Untuk memastikan keserasian penyemak imbas maksimum, apabila kami menggunakan atribut reka letak berbilang lajur, adalah lebih baik untuk menambah awalan enjin penyemak imbas Yang paling asas ialah tiga: -webkit- Google Chrome, Firefox -moz- in penyemak imbas, -ms- dalam pelayar IE, dan akhirnya, jangan lupa untuk menulisnya tanpa awalan.
<!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>kiraan lajur:
<integer> objek Count
seperti: -webkit-column-count:3;
lajur -jurang:
<panjang> menetapkan atau mendapatkan semula jurang antara lajur objek
Contohnya: lajur-jurang:normal; 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_count{
-webkit-column-count:3;
-moz-column-count:3;
}
</style>
</head>
<body>
<div>columns-count</div>
<div>
據(jù)俄羅斯《消息報(bào)》19日?qǐng)?bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。
根據(jù)消息，這2架蘇-35將用于中國(guó)飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國(guó)，
預(yù)計(jì)屆時(shí)在俄羅斯完成培訓(xùn)的中國(guó)飛行員將直接駕機(jī)回國(guó)，而且很可能回國(guó)就能形成戰(zhàn)斗力。
</div>
</body>
</html>peraturan lajur:
[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ] Menetapkan atau mendapatkan semula sempadan antara lajur objek. Sifat komposit. Bersamaan dengan atribut sempadan
seperti: column-rule:10px solid #090;
lajur-peraturan-lebar atribut menentukan ketebalan sempadan dua lajur:
<!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ù)俄羅斯《消息報(bào)》19日?qǐng)?bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國(guó)飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國(guó)，預(yù)計(jì)屆時(shí)在俄羅斯完成培訓(xùn)的中國(guó)飛行員將直接駕機(jī)回國(guó)，而且很可能回國(guó)就能形成戰(zhàn)斗力。
</div>
</body>
</html>column-rule-style menentukan gaya sempadan antara lajur:
<!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ù)俄羅斯《消息報(bào)》19日?qǐng)?bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。
根據(jù)消息，這2架蘇-35將用于中國(guó)飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國(guó)，
預(yù)計(jì)屆時(shí)在俄羅斯完成培訓(xùn)的中國(guó)飛行員將直接駕機(jī)回國(guó)，而且很可能回國(guó)就能形成戰(zhàn)斗力。
</div>
</body>
</html> Atribut column-rule-color menentukan warna jidar dua lajur: <!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ù)俄羅斯《消息報(bào)》19日?qǐng)?bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國(guó)飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國(guó)，預(yù)計(jì)屆時(shí)在俄羅斯完成培訓(xùn)的中國(guó)飛行員將直接駕機(jī)回國(guó)，而且很可能回國(guó)就能形成戰(zhàn)斗力。
</div>
</body>
</html>Menentukan bilangan lajur elemen menjangkau <!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ù)俄羅斯《消息報(bào)》19日?qǐng)?bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國(guó)飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國(guó)，預(yù)計(jì)屆時(shí)在俄羅斯完成培訓(xùn)的中國(guó)飛行員將直接駕機(jī)回國(guó)，而且很可能回國(guó)就能形成戰(zhàn)斗力。
</div>
</body>
</html>Menentukan lebar lajurAtribut lebar lajur menentukan lebar lajur. <!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ù)俄羅斯《消息報(bào)》19日?qǐng)?bào)道稱，俄羅斯空軍的2架蘇-35戰(zhàn)斗機(jī)近日抵達(dá)位于莫斯科近郊的葛羅莫夫試飛院。根據(jù)消息，這2架蘇-35將用于中國(guó)飛行員在俄進(jìn)行的蘇-35飛行培訓(xùn)。俄方曾表示，首批4架蘇-35將于年底前交付中國(guó)，預(yù)計(jì)屆時(shí)在俄羅斯完成培訓(xùn)的中國(guó)飛行員將直接駕機(jī)回國(guó)，而且很可能回國(guó)就能形成戰(zhàn)斗力。
</div>
</body>
</html>
