在包裝div內拼貼div而不是讓它們出現在外

Question

我正在嘗試在包裝div元素內部包含一系列拼貼。目前，它們出現在包裝div內，然後溢出div外，而不是水平包裝並顯示爲瓷磚。這是一個JSFiddle example。

爲了給他們應該如何看一個例子，看看在Windows Metro界面在瓷磚環繞到一個新的列： 這裏是CSS：

body { 
    margin-top: 50px; 
    background: #238d9a; 
} 

#metro { 
    width: 960px; 
    height: 340px; 
    background: #004050; 
    margin: 0 auto; 
    padding: 10px; 
} 

.tile { 
    width: 100px; 
    height: 100px; 
    background: white; 
    margin: 0px 10px 10px 0px; 
}​ 

Answer 1

您只需添加

display:inline-block; 

給你的瓷磚。我已經更新這裏的jsfiddle：

http://jsfiddle.net/cgMGM/1/

另一種方法是添加float:left;但inline-block的首選是在這種情況下失去高度PREVEND的#metro DIV並防止額外.clear-的需要修正廢話。