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

94

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?

css html css-float

— Jase Whatson
sumber

167

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.

— alex
sumber

37

Saya berharap saya memahami logika mengapa overflow: hidden berfungsi dalam kasus ini.

— masteroleary

2

Ya, saya berharap bukan hanya saya yang menganggap ini kontra-intuitif. alex?

— regularmike

3

@masteroleary @regularmike HTML/CSStidak pernah menjadi teknologi UI yang bagus, jadi hal-hal kontra-intuitif di dalamnya cukup umum :)

— Yuriy Nakonechnyy

2

@masteroleary Saya menyadari ini adalah utas lama, tetapi saya baru-baru ini mencoba menjawab pertanyaan serupa di stackoverflow.com/questions/21041297#21041625 - semoga membantu

— xec

1

1 untuk floatsolusinya. Bekerja sangat baik dengan yang lain gagal, terutama saat dipasangkan dengan Twitter Bootstrap.

— Fizzix

17

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).

— Lycana
sumber

Mengapa saya dinilai turun? Itu berhasil, dan saya dengan tepat mengakui bahwa itu bukan solusi yang bagus.

— Lycana

1

Saya tidak yakin, saya memberi +1 setidaknya agar Anda kembali ke 0. Mungkin Anda ditolak karena Anda tidak memperbaiki CSS-nya yang salah ... yaitu menggunakan tanda sama dengan untuk menyetel properti CSS tidak benar.

— alex

cukup adil. Saya menghargai +1 alex. Saya pikir itu adalah pernyataan saya yang adil.

— Lycana

Solusi ini adalah IMO yang lebih baik. Saya akan menerima jawaban ini jika itu pertanyaan saya.

— ksg91

8

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.

— DarkWulf
sumber

tersembunyi berfungsi, tetapi Anda benar, otomatis berfungsi sedikit lebih baik. Terima kasih.

— Matt Setter

7

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

Ini sangat bersih.

— Nande
sumber

tampilan penggunaan div luar: table; dan di dalam div menggunakan display: table-cell;

— Anukul Limpanasil

4

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.

— Garrett
sumber

3

Gunakan jQuery:

Set Parent Height = Anak offsetHeight.

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

— Harpal
sumber

3

Berlebihan, ketika Anda bisa melakukannya dengan CSS saja.

— alex

1

Dengan jawaban saya, Anda dapat mengatur tinggi orang tua sama dengan anak tinggi tetapi menggunakan overflow kami tidak mengubah tinggi induk yang akan menimbulkan masalah jika kami menampilkan data setelah div induk.

— Harpal

1

Menggunakan clear: both;

Saya menghabiskan lebih dari seminggu mencoba mencari tahu ini!

— Ronan
sumber