Analisis sifat susun atur berbilang lajur CSS: kiraan lajur dan jurang lajur-tutorial css-php.cn

CSS 多列布局属性解析：column-count 和 column-gap

Analisis atribut reka letak berbilang lajur CSS: kiraan lajur dan jurang lajur, contoh kod khusus diperlukan

Dalam reka bentuk dan pembangunan web, reka letak berbilang lajur ialah salah satu kaedah reka letak yang biasa dan berguna. CSS menyediakan beberapa sifat untuk melaksanakan susun atur berbilang lajur, yang paling biasa digunakan ialah kiraan lajur dan jurang lajur.

Atribut kiraan lajur digunakan untuk menetapkan bilangan lajur elemen, manakala atribut jurang lajur digunakan untuk menetapkan jurang antara elemen. Kedua-dua sifat ini boleh digabungkan untuk mencapai kesan susun atur berbilang lajur dengan mudah. Mari analisa kedua-dua sifat ini dan contoh kod yang sepadan secara terperinci. Atribut

column-count menentukan bilangan lajur yang mana elemen dibahagikan. Ia menerima nilai integer yang mewakili bilangan lajur untuk dipecahkan. Perlu diingat bahawa oleh kerana kiraan lajur hanya menetapkan bilangan lajur dan tidak menetapkan lebar lajur, lebar lajur sebenar akan dikira secara automatik berdasarkan lebar elemen induk dan bilangan lajur.

Mari kita lihat contoh khusus:

 这是第一列的内容。
 这是第一列的内容。
 这是第一列的内容。
 这是第一列的内容。
 这是第一列的内容。
 这是第一列的内容。

Salin selepas log masuk

.column-layout { column-count: 3; }

Salin selepas log masuk

Kod di atas akan membahagikan kandungan elemen

kepada tiga lajur dan secara automatik mengira lebar lajur berdasarkan lebar induk elemen, mencapai pelbagai kesan reka letak Lajur.

元素的内容分成三列，并根据父元素的宽度自动计算列宽，实现多列布局效果。

接下来是 column-gap 属性，它用于设置元素之间的间隔。同样，它也接受一个值来确定间隔的大小。这个值可以是一个长度单位（如 px、em、rem 等），也可以是一个百分比。

我们继续上面的例子，在

Seterusnya ialah atribut ruang-jurang, yang digunakan untuk menetapkan jurang antara elemen. Begitu juga, ia menerima nilai untuk menentukan saiz selang. Nilai ini boleh menjadi unit panjang (seperti px, em, rem, dll.) atau peratusan.

Kami meneruskan contoh di atas, tambahkan atribut column-gap pada elemen

dan berikan nilai:

.column-layout { column-count: 3; column-gap: 20px; }

Salin selepas log masuk

Kod di atas akan menambah 20px antara lajur Space untuk membuat kandungan lebih jelas dan mudah dibaca.

Sudah tentu, anda juga boleh melaraskan nilai kiraan lajur dan jurang lajur untuk memenuhi keperluan yang berbeza. Contohnya, jika anda mahukan lebih banyak lajur dan jurang yang lebih kecil, cuba tetapkan kiraan lajur kepada 4 dan jurang lajur kepada 10px. Dengan hanya mengubah suai nilai sifat ini, anda boleh melaraskan kesan reka letak dengan mudah.

Perlu diambil perhatian bahawa sifat kiraan lajur dan jurang lajur hanya digunakan pada elemen peringkat blok. Jadi, jika anda ingin melaksanakan reka letak berbilang lajur pada elemen sebaris, anda perlu menukar elemen sebaris kepada elemen peringkat blok atau menggunakan kaedah reka letak yang lain. Ringkasnya, sifat kiraan lajur dan jurang lajur CSS ialah alat yang berkesan untuk melaksanakan reka letak berbilang lajur. Dengan menetapkan bilangan lajur dan saiz jurang, kami boleh mencipta kesan reka letak berbilang lajur yang cantik dengan mudah. Sama ada memaparkan imej, penyenaraian berita atau paparan produk, reka letak berbilang lajur boleh meningkatkan kebolehbacaan dan pengalaman pengguna halaman web anda. Jadi, dalam projek anda yang seterusnya, cuba gunakan sifat kiraan lajur dan jurang lajur untuk melaksanakan reka letak berbilang lajur!

Atas ialah kandungan terperinci Analisis sifat susun atur berbilang lajur CSS: kiraan lajur dan jurang lajur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

css布局多列 column-count和column-gap

sumber：php.cn

Artikel sebelumnya：Panduan pemilihan sifat fon CSS: Penggunaan yang betul bagi keluarga fon dan saiz fon Artikel seterusnya：Penjelasan terperinci tentang sifat ketelusan CSS: kelegapan dan rgba

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang