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

Question

我正在尝试在包装div元素中包含一系列tile。此刻，它们出现在包装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;，但在这种情况下，首选内联块可以预防#metro div失去高度并防止需要额外的.clear-fix废话。

Answer 2

您可以简单地使用

.tile{
      word-wrap: break-word;
      }

现在您可以在div中使用此类了