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

Question

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

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

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

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

Answer 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;
}

Answer 2

我已经制作了这个jsFiddle，我认为它可以做到你所说的，我只在 chrome 上测试过。

更新：第二次尝试

#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;
}