Bagaimana untuk Membuat Div Bersebelahan dengan Lebar Sama Menggunakan CSS?

Div Bersebelahan dengan Lebar Sama Automatik Menggunakan CSS

Untuk mencipta div anak yang mengambil lebar yang sama secara automatik dalam div induk, memanfaatkan kuasa paparan CSS: sifat jadual. Pendekatan ini, walaupun tidak disokong oleh IE7, berkesan mencapai hasil yang diingini dalam penyemak imbas moden.

Penyelesaian:

1. Tetapkan div induk untuk dipaparkan: jadual dan susun atur jadual: tetap. Ini mewujudkan struktur seperti jadual.
2. Tetapkan div kanak-kanak untuk dipaparkan: sel jadual. Ini menganggapnya sebagai sel jadual, menghasilkan lebar yang sama.
3. Laraskan sifat lebar dan ketinggian div induk seperti yang dikehendaki.

Contoh Kod:

CSS:

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

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

HTML:

<div>

Demo:

Lawati pautan JSFiddle berikut untuk melihat penyelesaian dalam tindakan:

• Tiga div: http://jsfiddle.net/g4dGz/
• Dua div: http://jsfiddle.net/g4dGz/1/

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