Có thể ngăn chặn việc bao bọc các phần tử con trong HTML không?

Question

.container 
{ 
position: absolute; 
bottom: 0px; 
height: 25px; 
left: 200px; 
padding-right: 5px; 
background-color: black; 
overflow: hidden; 
} 


.child 
{ 
position: relative; 
float: left; 
height: 100%; 
width: 95px; 
background-color: #99CCFF; 
margin-left: 5px; 
} 

Tôi khi kích thước cửa sổ trình duyệt nhỏ hơn sẽ cho phép tất cả trẻ em vừa vặn mà không cần gói, tôi muốn có thanh cuộn chứ không phải cơ chế mặc định của các phần tử con.

Tôi không kiểm soát được số lượng phần tử con nên tôi không thể đặt chiều rộng trên vùng chứa. Làm thế nào tôi có thể ngăn chặn việc bao bọc các phần tử con?

Answer 1

Nếu bạn không muốn gói, bạn không nên sử dụng phao nổi - chúng được tạo riêng để gói.

Sử dụng vùng chứa chính với overflow:auto và white-space:nowrap và trẻ em có display:inline hoặc inline-block.

Answer 2

Điều này là không thực sự có thể với HTML và CSS đơn giản. Không biết số lượng các phần tử con, cách duy nhất là tự động đặt độ rộng tối thiểu bằng JavaScript, dựa trên số lượng phần tử con và tổng chiều rộng của chúng.

Answer 3

Bạn có thể thêm chủ sở hữu chính() của tất cả các childes. Và sau đó sử dụng tràn: tự động của div đó. Nếu điều đó không hoạt động thì cũng sử dụng self.innerHeight và self.innerWidth (thông qua javascript) cho chiều cao và chiều rộng div.