扩大一个div的宽度，直到所有的孩子都适合答案

【问题标题】：Expand a div's width untill all the children fit扩大一个div的宽度，直到所有的孩子都适合
【发布时间】：2012-09-14 14:59:44
【问题描述】：

我正在尝试制作一个简单的滑块，所以我使用一个 div (#container) 来保存我需要滑动的项目（这个 div 将有溢出：隐藏），一个 div (#slider) 我想要移动，以便所有项目将一起移动，以及适合滑块的 div。

我希望滑块的宽度扩大，直到所有项目都适合与 float:left 的同一行。

我有这个 jsFiddle：http://jsfiddle.net/rBFPL/5/，我需要一些帮助才能使同一行上的红色 div 和青色 div 扩大其宽度。

你能帮我解决这个问题吗？

【问题讨论】：

标签： html css

【解决方案1】：

更新： http://jsfiddle.net/HCYPD/3/

#container {
    width : 400px;
    height : 200px;
    position : relative;
    background : yellow;
    overflow: hidden;
}

#slider {
    margin : 5px;
    position : absolute;
    background : cyan;
    width: auto;
    height : 190px;
    white-space: nowrap;
}

#slider div {
    margin : 20px;
    width: 100px;
    height: 150px;
    position : relative;
    display: inline-block;
    background : red;
}

【讨论】：

这几乎是我所需要的，但是没有办法只使用 css 吗？
我必须在那里添加动态加载的项目，它们的宽度将不一样..
发布了更新。尚未跨浏览器进行测试，但我相信它应该可以工作。
再次更新。这对你有用吗？在 Firefox 上测试良好。
是的，这就是我要找的东西。谢谢！

【解决方案2】：

我做了这个 jsFiddle ，我认为它和你说的一样，我只在 chrome 上测试过。

更新：第二次attempt

#container {
    background : yellow;
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    position : fixed;
    width : 400px;
}
#slider {
    background : cyan;
    position : fixed;
}
#slider div {
    margin : 20px;
    width: 100px;
    height: 150px;
    position : relative;
    float : left;
    background : red;
}

【讨论】：

不...我需要黄色 div 保持固定宽度，青色 div 比黄色 div 宽