Làm cho div bên ngoài được tự động có cùng độ cao với nội dung nổi

Question

Tôi muốn bên ngoài là div, màu đen để bọc một phần của nó bên trong nó. Tôi không muốn sử dụng style='height: 200px trong số div với id outerdiv vì tôi muốn nó tự động là chiều cao của nội dung của nó (ví dụ: số nổi div s).

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

Answer 1

Bạn có thể đặt CSS các 's outerdiv 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 yếu tố ở phần cuối vớ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 :after phần tử giả CSS (không được hỗ trợ rộng rãi trong các trình duyệt IE cũ).

Vấn đề là các thùng chứa sẽ không tự nhiên mở rộng để bao gồm trẻ em thả nổi. Được cảnh báo bằng cách 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ử cha, chúng sẽ bị ẩn. Bạn cũng có thể sử dụng 'tự động' 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ả 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ể là không thể/khó khăn.

Answer 2

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

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

Answer 3

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 là CSS, thay vào đó hãy sử dụng width: 300px;.

Tôi khuyên bạn nên áp dụng kỹ thuật clearfix trên #outerdiv. Clearfix là giải pháp chung để xóa 2 số div nổi để div cha sẽ mở rộng để phù hợp với 2 div nổi.

<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à example trong trường hợp của bạn và Clearfix sẽ giải quyết vấn đề gì.

Answer 4

Thứ nhất, tôi đặc biệt khuyên bạn nên tạo kiểu CSS trong tệp CSS bên ngoài, thay vì làm nội tuyến. Nó dễ dàng hơn nhiều để duy trì và có thể được tái sử dụng nhiều hơn bằng cách sử dụng các lớp học.

Làm việc tắt câu trả lời của Alex (& clearfix Garret của) của "thêm một phần tử vào cuối với clear: both", bạn có thể làm điều đó 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> 

này hoạt động (nhưng như bạn thấy inline CSS không đẹp lắm).

Answer 5

Sử dụng jQuery:

Đặt chiều cao gốc = Con bù đắpHeight.

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

Answer 6

Sử dụng clear: both;

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

Answer 7

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 để trợ giúp trong trường hợp này.

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