Petua untuk melaksanakan reka letak aliran air terjun dengan sifat CSS

. mempunyai lebar tetap dan boleh berbeza-beza ketinggian. Kaedah reka letak ini boleh menjadikan paparan halaman web lebih cantik dan memberi pengguna pengalaman visual yang baik.

Dalam CSS, kami boleh menggunakan beberapa atribut untuk melaksanakan reka letak aliran air terjun Di bawah kami akan memperkenalkan beberapa teknik biasa dan memberikan contoh kod khusus.

Gunakan atribut lajur CSS

Atribut lajur CSS boleh membahagikan elemen kepada berbilang lajur untuk reka letak Anda boleh menentukan bilangan lajur dalam reka letak dengan menetapkan atribut kiraan lajur dan tetapkan jarak lajur atribut ruang-jurang. Dengan menetapkan dua sifat ini, anda boleh mencapai kesan susun atur aliran air terjun.

Berikut ialah contoh mudah:
1. Kod HTML:

<div class="waterfall">
  <div class="item">内容块1</div>
  <div class="item">内容块2</div>
  <div class="item">内容块3</div>
  <div class="item">内容块4</div>
  ...
</div>

Kod CSS:

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

.item {
  margin-bottom: 20px;
}

Dengan menetapkan atribut kiraan lajur bekas air terjun kepada 3, blok kandungan boleh dibahagikan kepada 3 lajur untuk susun atur. Pada masa yang sama, kawal jarak antara setiap blok kandungan dengan menetapkan atribut margin-bawah elemen item. Ini mencapai kesan susun atur aliran air terjun.

Gunakan sifat flexbox CSS

Sifat flexbox CSS juga boleh mencapai kesan susun atur aliran air terjun. Atribut flexbox boleh merealisasikan susun atur fleksibel Anda boleh merealisasikan susun atur kandungan dari atas ke bawah dengan menetapkan atribut flex-direction kepada "column", dan merealisasikan pembungkusan kandungan dengan menetapkan atribut flex-wrap kepada "wrap".

Berikut ialah contoh:
2. Kod HTML:

<div class="waterfall">
  <div class="item">内容块1</div>
  <div class="item">内容块2</div>
  <div class="item">内容块3</div>
  <div class="item">内容块4</div>
  ...
</div>

Kod CSS:

.waterfall {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.item {
  width: 30%;
  margin-bottom: 20px;
}

Dengan menetapkan atribut paparan bekas air terjun kepada lentur, atribut arah-lentur ke lajur dan atribut flex-wrap untuk membalut , anda boleh merealisasikan kandungan daripada susun atur Atas ke bawah dan kandungan yang melebihi lebar bekas akan dipaparkan dalam baris baharu. Pada masa yang sama, anda boleh mengawal lebar dan jarak setiap blok kandungan dengan menetapkan atribut lebar dan margin bawah elemen item.

Ringkasan:

Di atas ialah dua atribut CSS yang biasa digunakan untuk melaksanakan teknik reka letak aliran air terjun, dan contoh kod khusus diberikan. Berdasarkan keperluan sebenar dan senario khusus, anda boleh memilih kaedah yang sesuai untuk melaksanakan reka letak aliran air terjun dan meningkatkan kesan visual dan pengalaman pengguna halaman web.

Atas ialah kandungan terperinci Petua untuk melaksanakan reka letak aliran air terjun dengan sifat CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!