即使容器無包裝，浮動divs包裝？

-1

有一些關於這方面的問題，但我還沒有找到一個好的答案。一直在尋找幾個小時。即使容器無包裝，浮動divs包裝？

這裏是我的jsfiddle： http://jsfiddle.net/foreyez/Mr2ER/

我有一些簡單的標記：

<div class='container'> 
    <div class='box1'></div> 
    <div class='box2'></div> 
    <div class='box3'></div> 
</div>

和CSS：

.container { 
    white-space:nowrap; 
} 

.box1 { 
    width:200px; 
    height:200px; 
    background:red; 
    float:left; 
} 

.box2 { 
    width:200px; 
    height:200px; 
    background:green; 
    float:left; 
} 

.box3 { 
    width:200px; 
    height:200px; 
    background:blue; 
    float:left; 
}

然而，箱子仍包裹在窗口足夠小。有什麼建議麼？注意：我想保留這個float：left，所以沒有內聯塊解決方案。

來源

2014-03-04 foreyez

你爲什麼不想要'直列block'建議什麼時候你正在描述的是什麼'內聯塊'呢？ http://jsfiddle.net/97B8e/ – George

內聯塊有問題。如在元素之間添加不必要的填充。然後有黑客得到它像我不想處理的font-size：0px一樣工作。 – foreyez

這是不填充，這簡直是空白 - 刪除空格和「問題」消失。沒有黑客。只是一個想法。 – George

如果添加width:600px;到.container這將迫使他們保持在線。

這是你的updated JSFiddle

來源

2014-03-04 16:57:29

給#container的寬度至少一樣大的子div

.container { 
    white-space:nowrap; 
    width:9999px; 
}

jsFiddle example

來源

2014-03-04 16:58:08 j08691

爲什麼你給它這樣一個荒謬的寬度是多少？ –

@DannyHearnah - 這只是一個例子。作爲一個在我的回答中寫道，寬度至少應爲孩子的div的寬度一樣大。它適用於動態內容。 – j08691

即使容器無包裝，浮動divs包裝？

回答

相關問題