Bagaimana untuk Mencipta Bekas Lebar Bendalir dengan DIV Jarak Sama?

Bekas Lebar Bendalir dengan DIV Jarak Sama

Anda mempunyai DIV bekas dengan lebar bendalir dan anda mahu meletakkan empat DIV dalam ini bekas. Setiap DIV hendaklah bersaiz 300px x 250px. Anda mahu Kotak 1 terapung ke kiri, Kotak 4 terapung ke kanan dan Kotak 2 dan 3 dijarakkan sama rata antara Kotak 1 dan 4. Selain itu, anda mahu jaraknya menjadi cair, melaraskan kepada saiz tetingkap penyemak imbas.

Penyelesaian:

Untuk mencapai ini, gunakan yang berikut kod:

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  /* just for demo */
  min-width: 612px;
}

.box1,
.box2,
.box3,
.box4 {
  width: 150px;
  height: 125px;
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1
}

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

.box1,
.box3 {
  background: #ccc
}

.box2,
.box4 {
  background: #0ff
}

<div>

Penyelesaian ini menggunakan teknik berikut:

• text-align: justify: Edarkan kotak sama rata dalam bekas.
• .regangan: Unsur halimunan yang memenuhi baki ruang, memastikan jarak sekata.
• paparan:sebaris-blok: Membolehkan kotak diletakkan sebaris dan dijarakkan menggunakan penjajaran justify.
• saiz fon : 0; line-height: 0: Membetulkan isu dengan IE6.

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