Html 在包装div内平铺div，而不是将其显示在外部

我试图在包装div元素中包含一系列的tile。此时，它们出现在环绕div内部，然后溢出到div外部，而不是水平环绕并显示为平铺。这是一个例子

要举例说明它们的外观，请查看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;
}​

您只需添加

display:inline-block;

你的瓷砖。我在这里更新了JSFIDLE：

另一种方法是添加

float:left但在这种情况下，最好使用内联块，以防止“metro div”失去高度，并防止需要额外的清晰修复。无意义。
您只需使用

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

现在您可以在div中使用这个类