Inner trái nổi div của không mở rộng div container theo chiều dọc

Question

Tôi có một div container với các thuộc tính sau:

#cat_container{ 
margin:0; 
padding:5px; 
border:1px solid red; 
min-height:200px; 
} 

Bên trong có nhiều trái nổi div của. Vấn đề là họ không ép div chứa để mở rộng xuống, thay vào đó chỉ chồng lên nhau và tiếp tục bên ngoài ranh giới div của vùng chứa.

Left div nổi của:

.cat_wrap{ 
border: 1px solid #000; 
width:100px; 
min-height:120px; 
margin:0 10px 5px 0; 
padding:0; 
float:left; 
} 

Nhược bằng tôi lấy phao trái ra, div chứa không mở rộng theo chiều dọc như nó phải làm. Vì vậy, làm thế nào để tôi nhận được các div bên trong để trôi nổi bên trái mà còn mở rộng div container theo chiều dọc?

Answer 1

bạn cần đặt mức tràn cho div chính. tràn: tự động; điều này sẽ buộc hộp chứa div mở rộng và thích ứng với nội dung.

#cat_container{ 
    margin:0; 
    padding:5px; 
    border:1px solid red; 
    min-height:200px; 
    overflow: auto; 
    height: auto !important; 
} 

Answer 2

Đây là vấn đề phổ biến và được khắc phục bằng giải pháp "clearfix". Thiết tràn sẽ khắc phục vấn đề này, tuy nhiên có những giải pháp tốt hơn, như sau:

.mydiv:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 
* html .mydiv    { zoom: 1; } /* IE6 */ 
*:first-child+html .mydiv { zoom: 1; } /* IE7 */ 

Điểm chính của giải pháp này là để kích hoạt các hasLayout tài sản của div. May mắn là nó đủ cho IE 6/7 để thiết lập zoom đến 1 để kích hoạt điều đó. Các trình duyệt hiện đại hỗ trợ phần tử giả :after có thể sử dụng câu lệnh đầu tiên, nó sạch hơn và không ảnh hưởng đến thuộc tính tràn.

Xin lưu ý rằng bạn nên tránh sử dụng câu lệnh !important như được đề xuất trong câu trả lời trước đó vì đó không phải là css tốt. Hơn nữa nó sẽ không cho phép bạn kiểm soát chiều cao của div nếu bạn muốn và không làm bất cứ điều gì để giải quyết vấn đề.

Answer 3

Đó là . Cách tốt nhất để làm điều này là sử dụng tài sản flex.

.container { 
    display: flex; 
    flex-wrap: wrap; 
} 

Sau đó, phần tử con có thể loại bỏ thuộc tính ma thuật cũ float.

Kiểm tra điều này JSFiddle để xem hiệu ứng.

Lưu ý: khi chiều cao của các phần tử con không đồng nhất, cách uốn cong sẽ hoạt động khác nhau theo cách float. Nhưng thật khó để nói cái nào là đúng.