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

我有一个容器，其ID为#parent，我动态地添加了几个类.child的图像，固定宽度和高度可以假定为.child元素。CSS依赖其浮动子容器扩展父容器

我希望所有的.child浮在一起，以建立一个水平列表。我如何获得#parent自动调整到所有.child的总宽度？

非常感谢！

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

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

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

来源

2013-03-16 wzr1337

你想要父母的宽度达到什么限制？ – Ankit 2013-03-16 07:25:46

在你的小提琴中，你已经为#view设置了宽度320px，在#parent之后什么超过了320px？ – Ankit 2013-03-16 07:26:41

你可以让你的父母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/

来源

2013-03-16 07:21:55 dfsq

我在这个小提琴中用#view模拟页面溢出：http://jsfiddle.net/u8GPN/27/ – wzr1337 2013-03-16 08:32:02

非常感谢您解决我的问题 – wzr1337 2013-03-16 08:32:25

你也可以给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元素高度，占据布局空间。

来源

2013-03-16 07:31:18

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

回答

相关问题