Đặt div bên ngoài tự động có cùng chiều cao với nội dung nổi của nó

Tôi muốn phần bên ngoài div, màu đen để bọc divbên trong nó. Tôi không muốn sử dụng style='height: 200pxtrong divvới outerdivid như tôi muốn nó được tự động chiều cao của nội dung của nó (ví dụ, nổi 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>

Làm thế nào để đạt được điều này?

Bạn có thể đặt outerdivCSS của thành này

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

Bạn cũng có thể làm điều này bằng cách thêm một phần tử vào cuối clear: both. Điều này có thể được thêm bình thường, với JS (không phải là một giải pháp tốt) hoặc với :afterphần tử giả CSS (không được hỗ trợ rộng rãi trong các IE cũ hơn).

Vấn đề là các thùng chứa sẽ không mở rộng một cách tự nhiên để bao gồm các trẻ em trôi nổi. Hãy cảnh báo khi sử dụng ví dụ đầu tiên, nếu bạn có bất kỳ phần tử con nào bên ngoài phần tử mẹ, chúng sẽ bị ẩn. Bạn cũng có thể sử dụng 'auto' làm giá trị thuộc tính, nhưng điều này sẽ gọi thanh cuộn nếu bất kỳ phần tử nào xuất hiện bên ngoài.

Bạn cũng có thể thử thả nổi vùng chứa mẹ, nhưng tùy thuộc vào thiết kế của bạn, điều này có thể không khả thi / khó khăn.

Đầu tiên, tôi thực sự khuyên bạn nên tạo kiểu CSS của mình trong một tệp CSS bên ngoài, thay vì làm nó trong dòng. Nó dễ bảo trì hơn nhiều và có thể tái sử dụng nhiều hơn bằng cách sử dụng các lớp.

Làm việc với câu trả lời của Alex (& tiền tố rõ ràng của Garret) về "thêm một phần tử vào cuối với clear: cả hai", bạn có thể làm như vậy:

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

Điều này hoạt động (nhưng như bạn có thể thấy CSS nội tuyến không quá đẹp).

Bạn có thể muốn thử phao tự đóng, như chi tiết trên http://www.sitepoint.com/simple-clearing-of-floats/

Vì vậy, có lẽ hãy thử một trong hai overflow: auto(thường hoạt động), hoặc overflow: hidden, như alex đã nói.

Tôi biết một số người sẽ ghét tôi, nhưng tôi đã tìm thấy display:table-cellđể giúp đỡ trong trường hợp này.

Nó thực sự sạch hơn.

Trước hết, bạn không sử dụng width=300pxđó là cài đặt thuộc tính cho thẻ không phải CSS, hãy sử dụng width: 300px;thay thế.

Tôi sẽ đề nghị áp dụng clearfixkỹ thuật trên #outerdiv. Clearfix là một giải pháp chung để xóa 2 div động để div mẹ sẽ mở rộng để chứa 2 div động.

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

Đây là một ví dụ về tình huống của bạn và Clearfix làm gì để giải quyết nó.

Sử dụng jQuery:

Đặt Chiều cao mẹ = Bù trừ Chiều cao con.

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

Sử dụng clear: both;

Tôi đã dành hơn một tuần để cố gắng tìm ra điều này!