在包装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-的需要修正废话。