Làm cách nào để làm cho div phát triển với nội dung?

Question

Đạt đến html, làm cách nào để tạo vùng chứa div phát triển với nội dung thay vì xác định chiều rộng và chiều cao theo cách thủ công.

Không có vấn đề gì kích thước của logo là, trong bao bì không phát triển với nó: (... thế nào tôi sẽ sửa lỗi này (hoặc nó có thể được cố định)

Answer 1

Bạn có? Mã mẫu? Một div sẽ luôn luôn là chiều rộng đầy đủ của vùng chứa vì nó là phần tử block-level.

Answer 2

Nếu bạn không xác định chiều rộng và/hoặc chiều cao, phần tử div sẽ tăng cùng với nội dung của nó. Nếu nội dung được đặt thành nổi, bạn phải đặt thành vùng chứa

overflow:hidden 

để phát triển!

Answer 3

Hành vi mặc định cho div là lấp đầy toàn bộ chiều rộng có sẵn. Một vài cách để ghi đè này:

• thiết display: inline-block (không IE thân thiện)
• phao nó (với tác dụng phụ của, tốt, nổi nó)
• thiết display: inline (nhưng đó là gần như không bao giờ những gì bạn muốn)
• thiết position: absolute
• mã hóa cứng có chiều rộng (không có chiều rộng năng động mặc dù)

Như một phương sách cuối cùng, consi javascript.

Answer 4

Bạn có thể chỉ định chiều rộng tối thiểu và chiều cao tối thiểu và DIV sẽ điều chỉnh chiều rộng/chiều cao khi nội dung thay đổi (tất nhiên, không phải dưới chiều rộng/chiều cao tối thiểu).

Working code pen example

thuộc tính css Quan trọng nhất từ ​​mã (DIV là có thể chỉnh sửa, vì vậy chỉ cần gõ vào văn bản và nó sẽ phát triển cùng với nó bằng chiều rộng/chiều cao):

min-height: 200px; 
    min-width: 100px; 

Answer 5

Sử dụng thuộc tính css huyền diệu gọi là "flex", nó thực sự tuyệt vời

yourDiv{ 
display:flex; 
} 

Chỉ cần đảm bảo rằng trẻ không có vị trí: tuyệt đối vì điều này sẽ không hoạt động với flex.