自動設置div寬度

Question

我的容器中有三個浮動到左側的div，所以它們都將水平對齊。我希望下一個div的內容放在div的第一行之下。我的計劃是在第一行添加第四個div並設置它的寬度，以便佔用第一行的其餘部分，從而使下一個div在第二行中向下移動。

我試着將第四個div（fill div）的寬度設置爲auto，但它不工作。

Answer 1

嘗試添加一個clear:left到第四個div。這迫使它進入一個新的行。

Answer 2

我想你要搜索的是元素的百分比寬度。

.myDiv { 
    width: 35%; 
    float: left; 
} 

.mySecondDiv { 
    width: 65%; 
    float: right; 
} 

有了這樣你應該記住，任何保證金當然會打破百分比來衡量元素的排列，因爲現在他們正在使用的屏幕寬度的100％。任何添加到水平軸的邊距都將導致.mySecondDiv下降。

如果這不是你要找的，請爲我們提供一個你的情況的小提琴。

編輯：

你撥弄了一下，回來與此解決方案： http://jsfiddle.net/6zyo926f/2/

您應該刪除的寬度從div設置，而是，像在單獨的div使用我的例子。使用display: inline-block;爲您的容器提供您正在尋找的東西。

忘記float爲此。有三個元素或更少，這是非常有用的，但與此，它不是很好。要在.container內調整它們，請使用padding。

Answer 3

我必須改變一些你的CSS

改變CSS

#container { 
    padding:5px; 
    box-sizing:border-box; 
} 
div { 
    margin:0 5px 5px 0; 
} 
#fourth { 
    background-color:#0000FF; 
    float:none; 
    clear:both; 
    width:100%; 
    margin-right:0; 
} 

working JsFiddle File

希望這能對你的作品的。