Bagaimana untuk Memisahkan Div kepada Dua Bahagian dengan Satu Div Mengambil Baki Ruang?

Cara Mencapai Pemisahan Mendatar Sempurna dengan Div dalam XHTML/CSS

Anda telah bersarang div di dalam div luar dengan lebar 100%, dan anda ingin membahagikan lebar div bersarang kepada dua bahagian, dengan satu div mengambil bahagian ruang yang tinggal selepas yang lain. Tangkapannya ialah anda tidak mahu menentukan lebar div pertama, kerana saiznya bergantung pada kandungannya.

Keajaiban Limpahan Tersembunyi

The penyelesaian terletak pada menggunakan limpahan: tersembunyi;. Sifat CSS ini menghalang elemen bersebelahan dengan elemen terapung daripada melangkaui sempadan float.

Struktur HTML

Laraskan HTML anda seperti berikut, menggantikan # aksara dengan ID yang sesuai:

<div>

CSS Gaya

Laksanakan CSS berikut:

#outer {
    overflow: hidden;
    width: 100%;
    border: solid 3px #666;
    background: #ddd;
}

#inner1 {
    float: left;
    border: solid 3px #c00;
    background: #fdd;
}

#inner2 {
    overflow: hidden;
    border: solid 3px #00c;
    background: #ddf;
}

Sokongan IE 6

CSS pilihan untuk sokongan IE 6 (jika diperlukan):

<!--[if lte IE 6]>
    <style type="text/css">
        #inner2 {
            zoom: 1;
        }

        #inner1 {
            margin-right: -3px;
        }
    </style>
<![endif]-->

Hasil

Dengan perubahan ini, #inner2 akan menduduki ruang mendatar yang tinggal, memastikan pembahagian yang kemas dan dinamik bagi lebar yang tersedia antara div bersarang.

Atas ialah kandungan terperinci Bagaimana untuk Memisahkan Div kepada Dua Bahagian dengan Satu Div Mengambil Baki Ruang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!