Cách tăng chiều cao div để bao gồm hình ảnh nổi

Question

Đây là vấn đề. Tôi có một div bao gồm một vài đoạn văn bản trong đó và sau đó một hình ảnh được thả nổi bên phải. Các hình ảnh nổi ngay khi nó nên nhưng div chứa không mở rộng theo chiều dọc để chứa cho hình ảnh. Tôi biết rằng tôi có thể tự thiết lập chiều cao của div nhưng điều này trở nên có vấn đề bởi vì tôi muốn sử dụng cùng một div cho mỗi trang của trang web của tôi và do đó chiều cao sẽ cần phải khác nhau.

Đây là một mẫu mã:

#main_contentbox { 
 
    width: 918px; 
 
    margin: 10px auto; 
 
    padding: 10px 20px 20px 20px; 
 
    background-color: #ffffff; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #000; 
 
} 
 

 
#main_contentbox img#sample { 
 
    float: right; 
 
}

<div id="main_contentbox"> 
 
    <h1 class="page"> The Event </h1> 
 
    <img id="sample" src="sample.jpg" /> 
 
    <p> 
 
    stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!</p> 
 

 
    <p>stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome! 
 

 

 
</div>

Answer 1

Bạn có thể thay đổi hành vi về cách cha mẹ khối đối phó với nội dung nổi bằng cách thay đổi overflow tài sản. Điều này sẽ làm điều đó:

#main_contentbox { overflow: hidden; } 

Answer 2

Hãy thử một cái gì đó với JavaScript có thể:

window.onload = FixMyDiv(); 

function FixMyDiv() 
{ 
    var divh = document.getElementById('main_contentbox').style.offsetHeight; 
    var imgh = document.getElementById('sample').style.offsetHeight; 

    if(divh < imgh + 50) document.getElementById('main_contentbox').style.height = imgh + 50; 


} 

Answer 3

Sử dụng một pseudoclass :after, bạn có thể có tên div tự động thêm một sửa chữa rõ ràng. Thêm phần này vào tập tin css của bạn:

#main_contentbox:after { 
    content: "Foo"; 
    visibility: hidden; 
    display: block; 
    height: 0px; 
    clear: both; 
} 

Với điều đó tại chỗ, bạn không cần phải làm bất cứ điều gì để buộc main_contentbox phát triển để chứa nổi nó, không có vấn đề gì trang web mà bạn đang ở trên.

Answer 4

Trong khi @ giải pháp cletus là đúng về mặt kỹ thuật, thiết lập tràn để bất kỳ giá trị khác hơn overflow: visible (mặc định), initial (sử dụng một cách rõ ràng mặc định), hoặc inherit với cha mẹ visible sẽ dẫn đến yếu tố tạo ra một mới block formatting context. Một bối cảnh định dạng khối là một khu vực trong đó các phần tử nổi có thể tương tác với các khối. Tình huống này (phần tử nổi bên trong một phần tử không tràn): phần tử hiển thị) được liệt kê rõ ràng là lý do cho việc tạo bối cảnh mới là cần thiết:

"nếu phao bị cắt với phần tử cuộn nó sẽ buộc phải tua lại nội dung. Việc viết lại sẽ xảy ra sau mỗi bước cuộn, dẫn đến trải nghiệm cuộn chậm. " - mdn

Kết quả là, chiều cao sẽ được tính lại cho trẻ em ngay trong ngữ cảnh mới này và chiều cao của chúng sẽ được bao gồm.

Tôi thích sử dụng overflow: auto để thực hiện điều này khi tôi có thể, nhưng scroll, overlay, hoặc hidden tất cả sẽ tạo ra kết quả mong muốn của bao gồm cả phao trong việc tính toán chiều cao của phần tử cha mẹ.