Buat div luar secara otomatis memiliki tinggi yang sama dengan konten mengambangnya

Saya ingin bagian luarnya div, yang hitam membungkusnya yang divmengambang di dalamnya. Saya tidak ingin menggunakan style='height: 200pxdalam divdengan outerdivid seperti yang saya inginkan secara otomatis ketinggian isinya (misalnya, mengambang divs).

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

Bagaimana cara mencapai ini?

Anda dapat mengatur outerdivCSS untuk ini

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

Anda juga dapat melakukan ini dengan menambahkan elemen di bagian akhir dengan clear: both. Ini dapat ditambahkan secara normal, dengan JS (bukan solusi yang baik) atau dengan :afterelemen semu CSS (tidak didukung secara luas di IE lama).

Masalahnya adalah bahwa wadah tidak akan mengembang secara alami untuk memasukkan anak-anak yang mengapung. Berhati-hatilah dengan menggunakan contoh pertama, jika Anda memiliki elemen anak di luar elemen induk, mereka akan disembunyikan. Anda juga dapat menggunakan 'auto' sebagai nilai properti, tetapi ini akan memanggil scrollbar jika ada elemen yang muncul di luar.

Anda juga dapat mencoba mengapung wadah induk, tetapi bergantung pada desain Anda, ini mungkin tidak mungkin / sulit.

Pertama, saya sangat menyarankan Anda melakukan penataan CSS Anda di file CSS eksternal, daripada melakukannya secara inline. Jauh lebih mudah untuk mempertahankan dan bisa lebih dapat digunakan kembali menggunakan kelas.

Mengerjakan jawaban Alex (& perbaikan jelas Garret) tentang "menambahkan elemen di akhir dengan clear: keduanya", Anda dapat melakukannya seperti ini:

    <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

Ini berfungsi (tetapi seperti yang Anda lihat, CSS sebaris tidak begitu cantik).

Anda mungkin ingin mencoba pelampung yang menutup sendiri, seperti yang dijelaskan di http://www.sitepoint.com/simple-clearing-of-floats/

Jadi mungkin coba salah satu overflow: auto(biasanya berhasil), atau overflow: hidden, seperti kata alex.

Saya tahu beberapa orang akan membenci saya, tetapi saya telah menemukannya display:table-cell bantuan dalam kasus ini.

Ini sangat bersih.

Pertama-tama Anda tidak menggunakan width=300pxitu adalah pengaturan atribut untuk tag bukan CSS, gunakan width: 300px;sebagai gantinya.

Saya akan menyarankan untuk menerapkan clearfixteknik pada file #outerdiv. Clearfix adalah solusi umum untuk menghapus 2 div mengambang sehingga div induk akan diperluas untuk mengakomodasi 2 div mengambang.

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

Berikut adalah contoh situasi Anda dan apa yang dilakukan Clearfix untuk mengatasinya.

Gunakan jQuery:

Set Parent Height = Anak offsetHeight.

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}

Menggunakan clear: both;

Saya menghabiskan lebih dari seminggu mencoba mencari tahu ini!