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

Question

我试图在包装 div 元素内放置一系列图 block 。目前，它们出现在包裹的 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; 但在这种情况下，内联 block 是首选，以防止 #metro div 失去高度并防止需要额外的 .clear-fix 废话。