Question

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

我希望所有.child彼此相邻浮动以构建水平列表。如何将#parent自动调整为所有.child的总宽度？

非常感谢！

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

可在此处找到解决方案：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; }：

{{1}}

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

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

Answer 2

您还可以将position: absolute提供给#parent div来解决跨浏览器支持的问题。（或者使用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 */
}

Working Fiddle

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

CSS扩展父容器依赖于其浮动子容器

2 个答案: