给父div一个浮动内容的宽度

Question

我想创建一个足够宽的外部div来包含它的所有子节点（向左浮动）。

这是我想要实现的基本图表（在纯CSS中）。我已经尝试了很多，但似乎无法喘息这个概念。这些项目始终在浏览器视口中开始包装。

   +--viewport-------------------+
   |                             |
   | +----parent div--------------------------------------------------------^
   | |                           |                                          |
   | | +-------+ +-------+ +--------+ +---------+ +--------+ +-----+        |
   | | |       | |       | |     |  | |         | |        | |     |        |
   | | |       | |       | |     |  | |         | |        | |     |        |
   | | |       | |       | |     |  | |         | |        | |     |        |
   | | +-------+ +-------+ +--------+ +---------+ +--------+ +-----+        |
   | +----------------------------------------------------------------------+
   |                             |
   |                             |
   +-----------------------------+

有人可以帮我吗？

Answer 1

将white-space: nowrap添加到父div，并为子项添加display: inline-block而不是float: left，例如：

.parent_div {
    white-space: nowrap;
}
.parent_div > div {
    display: inline-block;
}

以下是一个示例： FIDDLE