當沒有更多空間時將 Div 換行到新行

Question

我正在開發一個 Web 應用程序 (asp.net mvc3)

我有一個主 div。 我想在主 div 中添加很多 div。

但我希望它們是這樣的：div 應該在一行中彼此相鄰出現，當沒有更多空間時，下一個 div 將換行。 （類似於寫文本，當這一行沒有更多空間時，下一個單詞將換行）

我嘗試使用display: inline; 使它們彼此相鄰，但是當它們到達 Main div 的末尾時，如何使它們環繞？

有沒有辦法在不硬編碼職位的情況下做到這一點？ 因為 div 是動態添加的，所以我不知道它們有多大或它們的數量

謝謝

Answer 1

嘗試display: inline-block - http://jsfiddle.net/7FJRr/1/

更新如果IE7仍然是一個問題：

div {
    display: inline-block;
    zoom: 1; 
    *display: inline;
}

Answer 2

你是這個意思嗎？

http://jsbin.com/uzoruq/edit#javascript,html,live

我用float:left來安排內容div

我不知道將包裝div的解決方案，但這會使div內聯

編輯

如果您願意使用跨度，您可以這樣做：

http://jsbin.com/uzoruq/2/edit

我使用display:inline for the display:inline 。

Answer 3

可以在 flex 的幫助下做到這一點。

display: flex;
flex-wrap: wrap;

例如：

 .flex{ width: 5rem; background: yellow; display: flex; flex-wrap: wrap; justify-content: space-between; } .flex > div{ width: 2rem; background: black; color: white; margin-top: 1rem; margin-bottom: 1rem; }

 <div class="flex"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>