展开浮动元素的父div以适合它们的总宽度？

Question

我正在尝试将一个页面放在一起,上面会有一个水平滚动窗格 - 这是我希望获得的布局示例: 内容是动态添加的,具有不同的维度..

这是一些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.否则,我最接近的就是这个答案,但它离我想要的效果还很远.有可能单独使用HTML/CSS实现我正在寻找的东西,还是我必须求助于javascript？

Answer 1

这是你所期望的吗？http://jsfiddle.net/GE5Hf/4/

只要使用white-space: nowrap与一起inline-block和vertical-align: top.你不需要你的.innerdiv来达到预期的效果 - 只需使用一个容器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:要将.innerdiv作为其子项的宽度,只需给它display:inline-block:http://jsfiddle.net/GE5Hf/8/

编辑3:尝试在您上次删除的评论中建议的内容,即删除孩子的固定宽度.这真的很棘手,我不得不将每个子元素包装到特殊的div中,display: table-cell而innerdiv得到dislay: table-row:http://jsfiddle.net/GE5Hf/12/