html - 给父 div float 内容的宽度

Question

我想创建一个足够宽的外部 div 以包含它的所有子项(向左浮动)。

这是我想要实现的目标的基本图表(在纯 CSS 中)。我已经尝试了很多，但似乎无法理解这个概念。元素总是在浏览器视口(viewport)处开始换行。

   +--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