如何使一行div在另一個div內的一行中流動？

Question

我有一個div「容器」，比如400px的寬度，裏面有一個左浮動的div - 「box」寬度爲100px。有六個「盒子」divs，所以他們的摘要寬度大於400px，這導致該div行被包裝，我得到兩行，每個4和2個元素。我怎樣才能讓這6個div分成一行，一行而不是兩行？

Answer 1

您只需white-space: nowrap與display: inline-block對孩子的父元素。 Live demo here (click).

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

CSS：

.container { 
    width: 400px; 
    background: black; 
    white-space: nowrap; 
    overflow: scroll; 
} 

.container > div { 
    height: 50px; 
    width: 100px; 
    background: #555; 
    display: inline-block; 
    margin: 10px; 
} 

Answer 2

希望它會幫助你

display:inline-block; 

Answer 3

假設你繼續使用浮動：左; ...如果你的容器有一個400像素設置寬度，那麼你的孩子的div不能surprass 400像素的總和要麼寬。這包括任何填充，邊距或邊框空間。

要簡單地回答你的問題，有幾種方法？

1. 使容器600像素寬，而不是400像素...
2. 使孩子元素66px寬，而不是100px的...

一個更好的選擇是使用百分比...

• 使孩子元素16.666667％寬。

Answer 4

您需要給display: inline-block給容器的孩子，也給white-space: nowrap讓他們水平流動。這裏是CSS

#Container { 
    width: 400px; 
    border: 1px solid black; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 

.inside { 
    width: 100px; 
    height: 300px; 
    border: 1px solid black; 
    display: inline-block; 
} 

和HTML

<div id="Container"> 
    <div class="inside"></div> 
    <div class="inside"></div> 
    <div class="inside"></div> 
    <div class="inside"></div> 
    <div class="inside"></div> 
    <div class="inside"></div> 
</div> 

這裏是你的問題http://jsfiddle.net/sgaurav/vZLWQ/