Làm cách nào để tạo chiều cao div phụ thuộc vào nội dung bên trong?

Question

Tôi đã lồng div s, với hầu hết là float:left; display:block;, giống như việc phải làm:

<div class="container" style="display:block;"> 
    <div style="float:left; display:block; height:100px;"> 
    <div style="float:left; display:block; height:100px;"> 
</div> 

Tôi muốn div container để có được lớn hơn mà không cần thiết lập một chiều cao. Tại thời điểm này nó là một đường thẳng.
Làm cách nào để thiết lập bên trong div giây để hộp chứa có chiều cao?

TL; DR: Hiện nay tôi có thể nhìn thấy 2 bên div 's tốt, nhưng container là một căn hộ div (không cao).
Làm cách nào để cho nó có chiều cao?

Answer 1

Thêm overflow:hidden vào DIV đó.

Answer 2

Bạn có hai lựa chọn:

<div class="container" style="overflow:hidden"> 
    <div style="float:left; height:100px;"> 
    <div style="float:left; height:100px;"> 
</div> 

hoặc

<div class="container"> 
    <div style="float:left; height:100px;"> 
    <div style="float:left; height:100px;"> 
    <div style="clear:left"> 
</div> 

Lưu ý rằng overflow:hidden yếu tố sẽ quấn quanh nổi các yếu tố nội tại. Ngoài ra, bạn có thể sử dụng một phần tử để xóa phao, điều này cũng sẽ làm cho phần tử xung quanh bao bọc nội dung của nó.

Mẹo khác: Bạn không phải nêu rõ các div đó là display:block. Trong HTML, về cơ bản có 2 loại yếu tố, block và inline. Số tiền là block theo mặc định.