Làm thế nào tôi có thể ngăn chặn các phần tử div thả nổi khi gói được kích thước lại?

Question

Làm thế nào để bạn làm cho DIV được thả nổi bên trái với nhau không được bọc khi trình duyệt được kích thước lại sao cho chế độ xem trở nên nhỏ hơn?

div { 
    float: left; 
} 

Ví dụ khi trình duyệt hoàn toàn tối đa hóa dòng div s lên như thế này:

|div| |div| |div| |div| |div| |div| |div| |div| 

Nhưng khi tái kích thước trình duyệt nhỏ hơn điều này xảy ra:

|div| |div| |div| |div| |div| 
|div| |div| |div| 

thế nào có thể Tôi làm cho các div s không quấn khi trình duyệt được kích thước lại nhỏ hơn?

Answer 1

Đưa chúng vào một div khác có chiều rộng (hoặc chiều rộng tối thiểu) được chỉ định.

<div class="parentContainer"> 
    <div class="floater"></div> 
    <div class="floater"></div> 
    <div class="floater"></div> 
</div> 

.parentContainer { 
    /* The width of the parent needs to be equal to the total width of the children. 
    Be sure to include margins/padding/borders in the total. */ 
    width: 600px; 
    overflow: auto; 
} 

Nó cũng giúp có tràn: tự động chỉ định trên div chứa, để cho phép chiều cao của nó khớp với nổi con.

Answer 2

Tận dụng tối div container xung quanh họ

.container { 
width: 500px; 
white-space: nowrap; 
overflow: visible/hidden/scroll - whichever suits you; 
} 

Answer 3

tôi nhận ra rằng đó là thời trang để ghét trên bảng, nhưng họ có thể hữu ích.
http://jsfiddle.net/td6Uw/
Thay vì thả các div, hãy đặt chúng trong một bảng và bọc bảng bằng div bị giới hạn kích thước. TR sẽ ngăn chặn gói.
Ngoài ra, tôi đã sử dụng DIV bên trong TD để tạo kiểu ô dễ dàng hơn. Bạn có thể tạo kiểu cho các TD nếu bạn dành thời gian, nhưng tôi thấy chúng khó có thể tạo kiểu và thường bỏ đi và chỉ sử dụng phương pháp DIV-in-TD do fiddle của tôi sử dụng.

Answer 4

tôi khá muộn để các trò chơi, nhưng đây là những gì tôi đã phát hiện ra rằng hoạt động:

Hãy nói rằng bạn có một chuyển hướng cấu trúc như:

<nav> 
    <ul> 
     <li><a href="#">Example Link</a></li> 
     <li><a href="#">Example Link</a></li> 
     <li><a href="#">Example Link</a></li> 
    </ul> 
</nav> 

Để có được nó để hiển thị các liên kết nội tuyến, không bao giờ gói, bạn chỉ có thể sử dụng:

nav ul { 
    white-space: nowrap; 
} 

nav ul li { 
    display: table-cell; 
} 

Không có chiều rộng cố định hoặc bất cứ thứ gì bắt buộc.

Fiddle: http://jsfiddle.net/gdf3prb4/

Answer 5

Thực sự rất đơn giản. Ví dụ về mã:

Element { 
white-space: nowrap; 
}