html - 将 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 废话。

Answer 2

你可以简单地使用

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

现在你可以在你的 div 中使用这个类