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>列数及列宽固定:</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>列宽固定，根据容器宽度液态分布列数:</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>
据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。
根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，
预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。
</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>
据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。
</div>
</body>
</html><🎜 Atribut >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">
据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。
根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，
预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。
</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">
据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。
</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">
据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。
</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">
据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。
</div>
</body>
</html>
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
