css - CSS 扩展父容器依赖于它的浮动子容器

Question

我有一个容器，它的 id 是#parent，我动态添加了几个 class 的图像，.child可以为.child元素假设固定的宽度和高度。

我希望所有人都.child漂浮在彼此旁边以构建一个水平列表。如何#parent自动调整大小到 all 的总宽度.child？

非常感谢！

PS：我需要一个纯 CSS 解决方案..

小提琴：http: //jsfiddle.net/u8GPN/1/

解决方案可以在这里找到：http: //jsfiddle.net/u8GPN/28/

Answer 1

你可以让你的父母inline-block添加white-space: nowrap;到它：

#parent {
    display: inline-block;
    overflow: hidden;
    border: 1px dashed blue;
    white-space: nowrap;
}

http://jsfiddle.net/u8GPN/22/

测试动态添加新块http://jsfiddle.net/u8GPN/23/

Answer 2

你也可以给position: absolutediv#parent来解决跨浏览器支持的问题。（或white-space: nowrap按照@dfsq 的帖子所示进行）

#parent {
     display : block; /* (or) inline-block */
     overflow : hidden;
     border: 1px dashed blue;
     position:absolute; /* Doesn't extend the width more than the page's width */
}

工作小提琴

正如您所说，.child元素具有固定的宽度和高度，您需要 #view明确指定高度等于.child元素高度，以占用布局中的空间。