CSS3 berbilang lajur

Berbilang lajur CSS3

CSS3 boleh mereka bentuk kandungan teks ke dalam reka letak berbilang lajur seperti surat khabar

Berikut ialah atribut berkaitan yang digunakan oleh lajur
1.lebar-lajur : <panjang> auto menetapkan atau mendapatkan semula lajur objek
seperti: -webkit-column-count:3; daripada objek

seperti: column-gap:normal;column-gap:40px;

4.column-rule: [ column-rule-width ] || [ column-rule-style ] | |. [ column-rule-color ] tetapan Atau dapatkan semula sempadan antara lajur objek. Sifat komposit. Setara dengan atribut sempadan

seperti: column-rule:10px solid #090;

5.column-span: none |.

Contohnya: column-span:all;

6.column-fill: auto | balance Set atau dapatkan semula sama ada ketinggian semua lajur objek adalah seragam.

auto: Kandungan penyesuaian ketinggian lajur

keseimbangan: Ketinggian semua lajur disatukan dengan lajur tertinggi
Contohnya: isian lajur:keseimbangan;

7.pecah-lajur-sebelum : auto |. menghindarkan |.

auto: Ia tidak dipaksa atau dilarang untuk memutuskan baris sebelum elemen dan mencipta lajur baharu
sentiasa: Sentiasa putuskan baris sebelum elemen dan buat lajur baharu

elakkan: Elakkan putus baris sebelum elemen dan buat lajur baharu Lajur

auto: Ia tidak dipaksa atau dilarang untuk memutuskan garisan selepas elemen dan menjana lajur baharu
sentiasa: Sentiasa putuskan baris selepas elemen dan menjana lajur baharu

elakkan: Elakkan putus baris selepas elemen dan jana Lajur baharu

9.column-break-inside: auto | avoid-page |.

auto: tidak memaksa mahupun melarang garis putus di dalam elemen dan mencipta lajur baharu
elakkan: elakkan baris pecah dalam elemen dan mencipta lajur baharu

Penciptaan CSS3 Berbilang- lajur

atribut kiraan lajur menentukan bilangan lajur yang akan dipecahkan. Contoh berikut membahagikan teks dalam elemen <div>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。</p>
<div class="newspaper">
生長(zhǎng)在非洲荒漠地帶的依米花，默默無(wú)聞，少有人注意過(guò)它。許多旅人以為它只是一株草而已。但是，它會(huì)在一生中的某個(gè)清晨突然綻放出美麗的花朵。
那是無(wú)比絢麗的一朵花，似乎要占盡人世間所有色彩一樣。它的花瓣兒呈蓮葉狀兒，每瓣自成一色：紅、白、黃、藍(lán)，與非洲大地上空的毒日爭(zhēng)艷。
但是，它的花期很短，最多只有兩天。兩天后它就會(huì)隨著母株一起枯萎，開(kāi)花意味著它的生命的終結(jié)。
</div>
</body>
</html>

Jurang antara lajur dalam CSS3 berbilang lajur

atribut ruang-jurang menentukan jurang antara lajur.

Contoh berikut menentukan jurang 40 piksel antara lajur

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.newspaper
{
-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>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。</p>
<div class="newspaper">
在非洲的荒漠地帶，植物的生長(zhǎng)需要水分，而開(kāi)花的植物對(duì)水分的需求更大。
非洲一般植物都有龐大的根系采水，以供自身的水分需求。但是依米花沒(méi)有根系，
它只有惟一的一條主根，孤獨(dú)地蜿蜒盤曲著鉆入地底深處，尋找有水的地方。
那需要幸運(yùn)和頑強(qiáng)努力，一株依米花往往需要四至五年的時(shí)間在干燥的沙漠里尋找水源，然后一點(diǎn)點(diǎn)積聚養(yǎng)分，
在完成蓓蕾所需要的全部養(yǎng)分后，它開(kāi)花了！所以在它最美麗的時(shí)候，它因耗盡了自己的所有的養(yǎng)分而凋零。
</div>
</body>
</html>

Sempadan lajur CSS3

peraturan lajur The - atribut gaya menentukan gaya sempadan antara lajur

Menentukan bilangan lajur yang merentangi elemen

Contoh berikut menyatakan bahawa elemen <h2> span Atribut lebar lajur menentukan lebar lajur.

Sifat berbilang lajur CSS3Jadual berikut menyenaraikan semua sifat berbilang lajur CSS3: Penerangan

kiraan lajur Menentukan nombor lajur yang mana elemen harus dipecahkan.
isi lajur ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
Singkatan Kolum-Peraturan untuk semua lajur-peraturan-* sifat menentukan sempadan antara dua lajur gaya

lajur-peraturan-lebar menentukan ketebalan sempadan antara dua lajur

lajur- span Menentukan berapa lajur elemen harus span

lajur lebar Tentukan lebar lajur
Lajur Tetapkan singkatan warna lebar dan colorn-count

Meneruskan pembelajaran

||

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。</p> <div class="newspaper"> 生長(zhǎng)在非洲荒漠地帶的依米花，默默無(wú)聞，少有人注意過(guò)它。許多旅人以為它只是一株草而已。但是，它會(huì)在一生中的某個(gè)清晨突然綻放出美麗的花朵。那是無(wú)比絢麗的一朵花，似乎要占盡人世間所有色彩一樣。它的花瓣兒呈蓮葉狀兒，每瓣自成一色：紅、白、黃、藍(lán)，與非洲大地上空的毒日爭(zhēng)艷。但是，它的花期很短，最多只有兩天。兩天后它就會(huì)隨著母株一起枯萎，開(kāi)花意味著它的生命的終結(jié)。 </div> </body> </html>

serahkan Tetapkan Semula Kod
Operasi automatik