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

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

1. 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>

Kod CSS:

.columns {
  column-count: 3;
}

Kod di atas akan membahagikan teks perenggan yang dibalut dalam elemen dc6dce4a544fdca2df29d5ac0ea9906b Penyemak imbas secara automatik akan susun atur kandungan berdasarkan panjang dan bilangan lajur untuk mencapai paparan berbilang lajur. Atribut

2. 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>

Kod CSS:

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

Kod di atas akan membahagikan teks perenggan yang dibalut dalam elemen dc6dce4a544fdca2df29d5ac0ea9906b 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!