Question

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

这是一些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 div宽度作为其子项，只需将其设为display:inline-block： http://jsfiddle.net/GE5Hf/8/ < / p>
编辑3 ：尝试在您上次删除的评论中建议的内容，即删除孩子的固定宽度。这真的很棘手，我必须将每个子元素包装到display: table-cell的特殊div中，inner div获取dislay: table-row： http://jsfiddle.net/GE5Hf/12/

Answer 2

这可以仅使用CSS来完成。

这是 jsFiddle 。

解决方案是在position: relative;上设置.container，这会在.container内创建新的堆叠上下文，在{{1}上设置position: absolute;和white-space: nowrap;确保.inner的内容.inner不会换行到下一行，并且div将随其内容增长，添加.inner和{{1} display: inline-block;上的{}确保它们被视为内联元素并坚持其包含元素的顶部。

我相信这就是你所追求的，我已经检查了IE，Chrome，Firefox和Safari的最新版本，并且它在所有这些版本上运行良好，我没有理由相信它不适用于旧版本版本

<强> HTML

vertical-align: top;

<强> CSS

.inner > div

Answer 3

位置：相对强制性吗？

.container .inner {
    position: fixed;
    overflow: hidden;
}

demo

Answer 4

@styke你可以使用display:inline-block（以及.inner＆gt; div上的某些字体大小）和font-size:0来div.inner。左右这里提供了小提琴：http://jsfiddle.net/zepva/4/，忽略颜色，我仅将它们用于演示

font-size:0将使用display:inline-block删除元素之间的间隙，这样当您获得总数时div.inner的宽度，即子div的总和

Answer 5

看看这个，不需要脚本：

.container {
    width: 300px;
    height: 100%;

    background-color: silver;
}

.container .inner {
    white-space:nowrap;
    padding: 10px;
    overflow-x: scroll;

    background-color: gray;
}

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

    background-color: red;
    border: 1px solid black;
}

演示：http://jsfiddle.net/er144/4FLWK/

Answer 6

带有display:inline-block的

vertical-align:top，这样您的文字就不会落在容器的底部。

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

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

6 个答案: