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

Ciri susun atur berbilang lajur CSS: kiraan lajur dan jurang lajur

PHPz

Lepaskan： 2023-10-28 08:35:33

asal

1658 orang telah melayarinya

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

Sifat susun atur berbilang lajur CSS: kiraan lajur dan jurang lajur, contoh kod khusus diperlukan

Dalam pembangunan bahagian hadapan, melaksanakan reka letak berbilang lajur adalah keperluan yang sangat biasa. Dalam CSS, terdapat dua sifat yang boleh membantu kami melaksanakan reka letak berbilang lajur dengan mudah, ia adalah kiraan lajur dan jurang lajur. Atribut

column-count attribute

column-count attribute digunakan untuk menentukan bilangan lajur kandungan elemen dibahagikan untuk paparan. Ia menerima nilai integer positif yang menunjukkan bilangan lajur untuk membahagikan kandungan. Perlu diingat bahawa apabila atribut kiraan lajur ditetapkan, penyemak imbas secara automatik akan membantu kami mengira dan susun atur bilangan lajur.

Berikut ialah contoh:

Kod HTML:

<div class="columns">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Morbi sit amet urna leo. Suspendisse potenti.</p>
  <p>Nunc dapibus vitae libero a tristique. Donec vitae commodo sem, eu tristique erat.</p>
  <p>Fusce tristique lorem sed ipsum consectetur, nec laoreet dui euismod.</p>
  <p>Maecenas eget sem id ex feugiat placerat. Sed nec enim placerat, tristique diam in, sollicitudin sapien.</p>
</div>

Salin selepas log masuk

Kod CSS:

.columns {
  column-count: 3;
}

Salin selepas log masuk

Kod di atas akan membahagikan teks perenggan yang dibalut dalam elemen

Penyemak imbas secara automatik akan susun atur kandungan berdasarkan panjang dan bilangan lajur untuk mencapai paparan berbilang lajur. Atribut

column-gap

column-gap digunakan untuk menentukan jarak antara lajur. Ia menerima nilai panjang yang mewakili jarak antara lajur. Kita boleh menggunakan nilai piksel, peratusan atau kata kunci untuk menetapkan jarak yang sepadan.

Berikut ialah contoh:

Kod HTML:

<div class="columns">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Morbi sit amet urna leo. Suspendisse potenti.</p>
  <p>Nunc dapibus vitae libero a tristique. Donec vitae commodo sem, eu tristique erat.</p>
  <p>Fusce tristique lorem sed ipsum consectetur, nec laoreet dui euismod.</p>
  <p>Maecenas eget sem id ex feugiat placerat. Sed nec enim placerat, tristique diam in, sollicitudin sapien.</p>
</div>

Salin selepas log masuk

Kod CSS:

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

Salin selepas log masuk

Kod di atas akan membahagikan teks perenggan yang dibalut dalam elemen

antara setiap lajur 20 jarak piksel.

Ringkasan:

Dengan menggunakan atribut bilangan lajur dan jurang lajur, kami boleh melaksanakan reka letak berbilang lajur dengan mudah. kiraan lajur digunakan untuk menentukan bilangan lajur yang dibahagikan kepada kandungan, dan jurang lajur digunakan untuk menentukan jarak antara lajur. Kedua-dua atribut ini dengan cepat boleh membantu kami mencapai kesan reka letak berbilang lajur dan mempunyai kebolehkawalan yang baik.

Di atas ialah pengenalan kepada sifat susun atur berbilang lajur CSS, kiraan lajur dan jurang lajur saya harap ia akan membantu anda. Semua orang dialu-alukan untuk mencuba menggunakan atribut ini dalam projek sebenar untuk mencapai kesan reka letak yang lebih baik.

Atas ialah kandungan terperinci Ciri 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：

column-count susun atur berbilang lajur css column-gap

sumber：php.cn

Artikel sebelumnya：Analisis atribut lebar CSS: lebar maksimum dan lebar min Artikel seterusnya：Petua pengoptimuman atribut gaya jelas CSS: tetapkan semula dan normalkan

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