在包装 div 内平铺 div，而不是让它们出现在外面

Question

我正在尝试在包装的 div 元素内放置一系列图块。目前，它们出现在环绕的 div 内，然后溢出到 div 之外，而不是水平环绕并显示为瓷砖。这是一个JSFiddle 示例。

要举例说明它们的外观，请查看 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 以防止 #metro div 丢失高度并防止需要额外的 .clear-fix 废话。