CSS動態內容的水平分佈

我有一些動態創建的div在一個固定寬度的父div，我想讓它們水平分佈。由於它們是動態創建的，所以我不知道有多少在容器中，除非我用JS計算它們，我試圖避免。CSS動態內容的水平分佈

我最初嘗試使用「使用內聯塊和對齊文本」技術this頁;然而，當有更多的孩子比合適的時候（例如，當有兩排）時（看第二行here），它似乎表現得有點不切實際，所以我認爲這不會奏效。

* 編輯：其實我剛纔意識到，這實際上不是飄忽不定，這是間隔第二行是否正確，但我想，而不是（在這種特定情況下無論如何...）是三個紅色方框在第二條線上佔據第一條線的前三個位置的位置，在最後留下兩個位置，而不是將它們分開）......所以我認爲總的來說這種技術不太可能用於我。

有沒有其他方法可以達到上述目的。我寧願不必使用JS，但如果沒有其他方式，那麼我願意接受建議。

我最終承認我需要使用JS。我向第四個孩子添加了id，然後在CSS中，我可以從第四個孩子中刪除保證金（如果我不需要IE8支持，我假設所有這些都可以在CSS中使用nth child完成）。

編輯：最後最終得到我想要的東西 - http://jsfiddle.net/byronyasgur/kUgBA/14/

2013-01-15 22:07:34 byronyasgur

這不是失敗，這是花車的本機行爲。

如果你想要更多的適合每行，使容器更大或箱子變窄。

如果你不想讓它們環繞，可以將overflow:auto添加到你的容器的CSS中，你會得到一個滾動條。

2013-01-15 19:12:53

對不起有一個誤區，不知道我怎麼把你在錯誤的軌道上......我會嘗試修改我的問題...但它的不是我不希望他們包裝，其實我是。問題是，當我把一個額外的一個導致包裝佈局似乎有點不正常....看到這裏http://codepen.io/anon/pen/ysvIg – byronyasgur

使用float：left而不是display：內聯塊似乎解決了這個問題。 –

我無法複製這個。我正處在一個JavaScript解決方案的中間，所以我想我會專注於...謝謝 – byronyasgur

您需要刪除容器的寬度並添加display: inline-block;以允許dic容器具有任何內容的寬度。另外，在爲了使div來大小添加到overflow: auto;產生的div的量在它

#container { 
    display: inline-block; 
    background:olive; 
    overflow: auto; 
    height: 180px; 
}

2013-01-15 19:27:30

包含div需要有一個固定的寬度。更新我的問題 – byronyasgur

也許使用相對寬度而不是固定的寬度爲INTERAL的div ....

#testcontainer div { 
width: 19%; 
height: 30px; 
display: inline-block; 
background: red; 
float: left; 
margin: 2px;

}

2013-01-15 20:40:48 Scott

回答