Làm thế nào để làm cho một DIV không quấn?

Question

Tôi cần phải tạo kiểu thùng chứa DIV chứa nhiều DIV khác. Nó được hỏi rằng những DIV sẽ không quấn nếu cửa sổ trình duyệt được thay đổi kích thước để được thu hẹp.

Tôi đã cố gắng làm cho nó hoạt động như dưới đây.

<style> 
    .container 
    { 
     min-width: 3000px; 
     overflow: hidden; 
    } 
    .slide 
    { 
     float: left; 
    } 
</style> 
<div class="container"> 
    <div class="slide">something</div> 
    <div class="slide">something</div> 
    <div class="slide">something</div> 
    <div class="slide">something</div> 
</div> 

Điều này hoạt động trong hầu hết các trường hợp. Tuy nhiên, trong một số trường hợp đặc biệt, kết xuất không chính xác. Tôi đã tìm thấy vùng chứa DIV thay đổi thành chiều rộng 3000px trong RTL của IE7; và nó trở nên lộn xộn.

Có cách nào khác để làm hộp chứa DIV không quấn?

Answer 1

overflow: hidden sẽ cung cấp cho bạn hành vi chính xác. Đoán của tôi là RTL bị làm sai lệch bởi vì bạn có float: left trên gói được đóng gói div s.

Bên cạnh lỗi đó, bạn đã có hành vi đúng.

Answer 2

Thuộc tính min-width không hoạt động chính xác trong Internet Explorer, rất có thể nguyên nhân gây ra sự cố của bạn.

Đọc info và a brilliant script that fixes many IE CSS problems.

Answer 3

Hãy thử sử dụng white-space: nowrap; theo phong cách container (thay vì overflow: hidden;)

Answer 4

Cố gắng sử dụng width: 3000px; đối với trường hợp của IE.

Answer 5

Nếu tôi không muốn để xác định chiều rộng tối thiểu bởi vì tôi không biết số tiền của các yếu tố điều duy nhất mà làm việc với tôi là:

display: inline-block; 
white-space: nowrap; 

Nhưng chỉ trong Chrome và Safari:/

Answer 6

sau đây làm việc cho tôi mà không nổi (tôi sửa đổi ví dụ của bạn một chút cho hiệu ứng hình ảnh):

.container 
 
{ 
 
    white-space: nowrap; /*Prevents Wrapping*/ 
 
    
 
    width: 300px; 
 
    height: 120px; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
} 
 
.slide 
 
{ 
 
    display: inline-block; /*Display inline and maintain block characteristics.*/ 
 
    vertical-align: top; /*Makes sure all the divs are correctly aligned.*/ 
 
    white-space: normal; /*Prevents child elements from inheriting nowrap.*/ 
 
    
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    margin: 5px; 
 
}

<div class="container"> 
 
    <div class="slide">something something something</div> 
 
    <div class="slide">something something something</div> 
 
    <div class="slide">something something something</div> 
 
    <div class="slide">something something something</div> 
 
</div>

Các div có thể được phân cách bằng dấu cách. Nếu bạn không muốn điều này, hãy sử dụng margin-right: -4px; thay vì margin: 5px; cho .slide (nó xấu xí nhưng it's a tricky problem to deal with).

Answer 7

bạn có thể sử dụng

display: table; 

cho container của bạn và therfore tránh overflow: hidden;. Nó sẽ làm công việc nếu bạn sử dụng nó chỉ cho mục đích warpping.

Answer 8

Không có điều nào ở trên phù hợp với tôi.

Trong trường hợp của tôi, tôi cần phải thêm dòng sau vào sự kiểm soát người sử dụng tôi đã tạo ra:

display:inline-block; 

Answer 9

Thẻ <span> được sử dụng để nhóm inline-yếu tố trong một tài liệu.
(source)

Answer 10

này đã làm việc cho tôi:

.container { 
 
    display: inline-flex; 
 
} 
 

 
.slide { 
 
    float: left; 
 
}

<div class="container"> 
 
    <div class="slide">something1</div> 
 
    <div class="slide">something2</div> 
 
    <div class="slide">something3</div> 
 
    <div class="slide">something4</div> 
 
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 11

Các kết hợp bạn cần là

white-space: nowrap 

trên phụ huynh và

display: inline-block; // or inline 

trên con