扩展浮动元素的父 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 设置一个明确的宽度。否则，我最接近的是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/

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

Answer 2

看看这个，不需要脚本：

.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 3

这只能使用 CSS 来完成。

这是一个jsFiddle。

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

我相信这就是你所追求的，我已经检查了最新版本的 IE、Chrome、Firefox 和 Safari，它们都可以正常运行，我没有理由相信它不会在旧版本上运行版本。

HTML

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

CSS

.container {
    position: relative;
    width: 220px;
    height: 400px;
    overflow-x: scroll;
}
.container .inner {
    position: absolute;
    white-space: nowrap;
    background-color: #FFCCFF;
}
.container .inner > div {
    vertical-align: top;
    display: inline-block;
    margin: 10px;
}

Answer 4

@styke 您可以使用 display:inline-block（以及 .inner > div 上的一些字体大小）和 font-size:0 到 div.inner 来做到这一点。

此处提供小提琴：http://jsfiddle.net/zepva/4/，忽略颜色，我仅将它们用于演示

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

Answer 5

position: relative 是强制性的吗？

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

demo

Answer 6

display:inline-block，加上vertical-align:top，这样你的文字就不会落在容器的底部。

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