Bagaimana untuk Mencipta Bekas Lebar Bendalir dengan DIV Jarak Sekata?

Lebar Cecair dengan DIV Jarak Sekata

Seorang pengguna berusaha untuk mencipta DIV bekas lebar bendalir dengan empat DIV anak yang sama dimensi (300px x 250px). Keperluan adalah untuk DIV pertama terapung ke kiri, yang terakhir terapung ke kanan, dan dua yang selebihnya dijarakkan sama rata di antara mereka, sambil mengekalkan tindak balas.

Penyelesaian:

Pertimbangkan CSS dan HTML berikut pelaksanaan:

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

.box1,
.box2,
.box3,
.box4 {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

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

<div>

Penjelasan:

• DIV #container menggunakan text-align: justify and display: inline-block properties untuk mewajarkan DIV kanak-kanak.
• Blok sebaris disokong dalam penyemak imbas moden, tetapi untuk memastikan penyemak imbas silang keserasian, kami menggunakan paparan: sebaris dengan zum: 1 untuk IE6/7.
• Dalam IE6, elemen blok sebaris tidak dijarakkan dengan betul, jadi lebar 100% dengan saiz fon: 0 dan ketinggian garis : 0 membetulkan isu ini.
• Elemen span dengan kelas "stretch" mengisi ruang yang tinggal dalam bekas untuk mengedarkan DIV sama rata.
• DIV kanak-kanak ditetapkan kepada dimensi yang diingini dan diberi warna latar belakang khusus untuk tujuan demonstrasi.

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