Làm cách nào để div mở rộng theo chiều dọc để bao bọc nội dung bên trong?

Question

Tôi có một div bao bọc một số hình ảnh được tạo động. Tôi không biết danh sách hình ảnh là bao nhiêu. Vấn đề của tôi là div chứa các hình ảnh được tạo động không hoạt động giống như nó chứa bất kỳ nội dung nào - tôi muốn nó mở rộng đến chiều cao của danh sách hình ảnh. Mỗi hình ảnh được tự bọc trong một div.

Đây là div wrapper:

.block { padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; } 

Đây là đánh dấu tự động tạo ra cho (một trong) những hình ảnh:

<div class="block"> 
<div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="45.jpg" BORDER="0"/></div> 
..... 

Làm thế nào để tôi có được block div để mở rộng xuống với hình ảnh?

Cảm ơn

Answer 1

Vấn đề bạn đang quan sát xảy ra khi bạn thả nổi một phần tử, nó lấy nó ra khỏi dòng chảy bình thường của các phần tử (theo dòng chảy bình thường, nghĩa là cách các phần tử sẽ xuất hiện không có kiểu dáng). Khi bạn thả nổi một phần tử, các phần tử khác vẫn trong luồng thông thường sẽ bỏ qua nó và không tạo chỗ cho nó, đó là lý do tại sao số block của bạn không mở rộng toàn bộ chiều cao của hình ảnh của bạn.

Có một vài giải pháp khác nhau:

1) Thêm quy tắc overflow: hidden; đến lớp block:

.block { overflow: hidden; padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; } 

2) Thêm một yếu tố sau hình ảnh của bạn mà xóa nổi:

<div class="block"> 
    <div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="images/login1.png" BORDER="0"/></div> 
    <div style="clear: both;"></div> 
</div> 

Cả hai đều sẽ hoạt động, nhưng tôi thích giải pháp đầu tiên.

Answer 2

Tôi có thẻ div mở rộng (theo chiều ngang và chiều dọc) tùy thuộc vào những gì tôi có trong đó. Tôi có:

<div id="summary" style="float:right;margin:5px 5px 0;" ALIGN="right"> 

Tôi cũng đặt một bảng bên trong nó để giữ tất cả thông tin của tôi:

<table style="margin-left:1em; border:2px solid #000000; background-color:#f2f2f2; padding:1px; float:center; clear:right; font-size:85%;"> 

Answer 3

Thêm này trong file CSS của bạn:

.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .group {display: inline-block;} 
/* Hides from IE-mac \*/ * html .group {height: 1%;} .group {display: block;} /* End hide from IE-mac */ 

Và thêm "group" lên lớp block div của bạn để phao bị xóa:

<div class="block group"> 
... 

Answer 4

BỎ float:left từ phong cách hình ảnh và height:Auto từ phong cách khối

Thanh display:inline-block; trong khối phong cách (container phong cách)