Bagaimana Membuat Div Bersebelahan Mempunyai Lebar Sama Dalam CSS?

Lebar Sama untuk Div ​​Bersebelahan dalam CSS

Dalam HTML, penyusunan elemen dalam bekas induk selalunya dicapai menggunakan elemen div . Walau bagaimanapun, menjajarkan berbilang div kanak-kanak bersebelahan dengan lebar yang sama boleh menimbulkan cabaran.

Pertimbangkan struktur HTML berikut:

<div>

Dalam contoh ini, div kanak-kanak dijajarkan sebelah menyebelah , tetapi mereka mempunyai lebar sewenang-wenangnya. Untuk mencapai lebar yang sama, seseorang boleh menggunakan sihir CSS menggunakan paparan: sifat jadual.

#wrapper {
    display: table;
    table-layout: fixed;

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

Penyelesaian CSS ini mempunyai beberapa ciri utama:

• Set div induk (#wrapper) untuk dipaparkan sebagai jadual (paparan: jadual) dan menetapkan susun atur jadual: tetap untuk memastikan lebar lajur yang sama.
• Menetapkan div anak (#wrapper div) untuk dipaparkan sebagai sel jadual (paparan: sel jadual) dengan ketinggian yang sama.

Faedah:

• Berfungsi dalam penyemak imbas moden (IE7 tidak disokong)
• Melaraskan lebar lajur secara automatik berdasarkan ruang yang tersedia
• Membenarkan reka letak fleksibel dengan bilangan div kanak-kanak yang berbeza-beza

Contoh Langsung:

• Dua Div: [JSFiddle](https://jsfiddle.net/g4dGz/1/)
• Tiga Div: [JSFiddle](https://jsfiddle.net/g4dGz/)

Atas ialah kandungan terperinci Bagaimana Membuat Div Bersebelahan Mempunyai Lebar Sama Dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!