Bagaimana untuk Mencipta Susun Atur Bendalir dengan DIV Jarak Sama Menggunakan CSS?

Lebar Cecair dengan DIV Jarak Sama

Untuk mencapai susun atur bendalir dengan DIV yang sama jarak, pendekatan berikut boleh digunakan:

CSS

#container {
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

Ini menetapkan penjajaran teks kepada "justify", menyebabkan kandungan diedarkan sama rata merentas lebar yang tersedia.

.box1,
.box2,
.box3,
.box4 {
  display: inline-block;
  vertical-align: top;
}

Dengan menetapkan paparan: blok sebaris, DIV akan bertindak sebagai elemen sebaris, mengalir secara mendatar dalam bekas.

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

Elemen "regangan" ditambah untuk mengisi ruang yang tinggal dan menolak DIV ke kedudukan yang diingini. Membersihkan fon dan ketinggian garisan membantu dalam sesetengah penyemak imbas.

HTML

<div>

Elemen regangan memastikan DIV diagihkan secara sama rata dan responsif merentasi bekas bendalir.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Susun Atur Bendalir dengan DIV Jarak Sama Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!