Bagaimana untuk Mencipta Div Bersebelahan dengan Lebar Auto Sama menggunakan CSS?

Div Bersebelahan CSS dengan Lebar Auto Sama

Mencapai lebar auto yang sama untuk DIV anak dalam DIV induk boleh menjadi rumit dengan pendekatan apungan dan lebar tradisional. Walau bagaimanapun, menggunakan sifat paparan: jadual menyediakan penyelesaian moden yang membolehkan kefungsian ini.

Penyelesaian menggunakan Paparan: Jadual

1. Tetapkan DIV induk (#wrapper ) untuk dipaparkan sebagai jadual dan membolehkan susun atur jadual tetap. Ini akan memastikan bahawa DIV kanak-kanak menduduki lebar yang sama.
2. Tetapkan ketinggian DIV induk untuk menentukan ruang menegak yang tersedia.
3. Untuk setiap DIV kanak-kanak, tetapkan sifat paparan kepada sel jadual kepada pastikan ia kelihatan bersebelahan dan mempunyai ketinggian yang sama dengan DIV induk.

CSS Contoh:

#wrapper {
  display: table;
  table-layout: fixed;
  width: 90%;
  height: 100px;
  background-color: Gray;
}

#wrapper div {
  display: table-cell;
  height: 100px;
}

Contoh HTML:

<div>
<p><strong>Nota:</strong></p>
<ul>
<li>Ini penyelesaian tidak serasi dengan IE7 dan ke bawah.</li>
<li>Contoh JSFiddle yang disediakan menunjukkan kedua-dua tiga dan dua DIV anak yang sama lebar.</li>
</ul>
</div>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Div Bersebelahan dengan Lebar Auto Sama menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!