给父级 div 设置与其内部浮动元素相同的宽度

Question

我想创建一个外部div，它足够宽以容纳所有左浮动的子元素。

这是我想要在纯CSS中实现的基本图示。我已经尝试了很多次，但似乎无法掌握这个概念。项目总是从浏览器视口开始换行。

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

有人可以帮我解决这个问题吗？

- Tim Broddin

---

添加代码。使它对我们更简单易懂。 - Alvaro

将宽度设置为父元素，在滑块中我们使用这种方法。浮动元素会破坏它，从不使父元素增加宽度。使用CSS3 calc 来设置父元素的宽度。 http://jsfiddle.net/aslancods/UTrvg/4/ - sudhan kantharuban

Answer 1

将white-space: nowrap添加到父级 div 上，对于子元素，使用display: inline-block代替float: left，例如：

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

这是一个例子：FIDDLE。

- matewka