Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencipta Bekas Lebar Bendalir dengan DIV Jarak Sekata?

Bagaimana untuk Mencipta Bekas Lebar Bendalir dengan DIV Jarak Sekata?

Linda Hamilton
Lepaskan: 2024-12-27 17:35:11
asal
936 orang telah melayarinya

How to Create a Fluid-Width Container with Evenly Spaced DIVs?

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
}
Salin selepas log masuk
<div>
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan