javascript - 扩展 float 元素的父 div 以适应它们的总宽度？

Question

我正在尝试将一个页面放在一起，上面有一个水平滚动的 Pane - 这是我想要获得的布局示例:内容是动态添加的，并且具有不同的维度。 .

这是一些 HTML:

<div class="container">
    <div class="inner">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

基本 CSS:

.container {
    width: 100%;
    height: 100%;
}

.container .inner {
    position: relative 
}

.container .inner > div {
    float: left;
}

目前唯一能让它工作的方法是为 .inner 设置一个明确的宽度。否则，我最接近的是 this答案，但它仍然离我想要的效果很远。是否有可能单独使用 HTML/CSS 实现我正在寻找的东西，还是我必须求助于 javascript？

Answer 1

这是您所期望的吗？ <强> http://jsfiddle.net/GE5Hf/4/

只需将 white-space: nowrap 与 inline-block 和 vertical-align: top 一起使用。您不需要 .inner div 来达到预期的效果 - 只需使用一个带有 overflow-x: auto 的容器:

<div class="container">
        <div id="i1"></div>
        <div id="i2"></div>
        <div id="i3"></div>
</div>

CSS

.container {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    white-space: nowrap; 
}

.container > div {
    display:inline-block;
    vertical-align: top;
}

注意:最好使用 overflow-x: auto 而不是 scroll 以防不需要滚动条。

编辑:我们推测您是否真的需要那个 .inner div。如果你需要它，你可以把它加回来，不需要特殊的样式:http://jsfiddle.net/GE5Hf/5/

编辑 2: 要让 .inner 将宽度作为其子元素，只需给它display:inline-block: http://jsfiddle.net/GE5Hf/8/

编辑 3: 尝试了您在上次删除的评论中提出的建议，即删除子项的固定宽度。这真的很棘手，我不得不用 display: table-cell 将每个子元素包装到特殊的 div 并且 inner div 得到 dislay: table-row: http://jsfiddle.net/GE5Hf/12/