html - 我如何更改此 HTML/CSS 以使容器水平扩展到 float 的子项？

Question

这会一直垂直放置子 div。

HTML

<div class="outer">
    (other stuff here too)

    <div class="containingBox">
        <div class="container">
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </div>
</div>

CSS

.outer
{
    position: relative;
    top: 0px;
    left: 0px;
    width: 700px;
    margin-top: 15px;
}

.containingBox
{
    position: relative;
    top: 0px;
    left: 0px;
    width: 700px;
    height: 300px;
    background-color: red;

}

.container
{
    position: absolute;
}

.child
{
    position: relative;
    width: 700px;
    height: 300px;
    margin-right: 25px;
    float: left;
    background-color: blue;
}

http://jsfiddle.net/Ed3qL/

(我已经删除了 containingBox 和 outer 上的 overflow-x: hidden 所以你可以看到这个问题。)

编辑:您可以看到它有效直到我在父对象之外添加一个父对象!!

这有效:http://jsfiddle.net/seB5F

这不是:http://jsfiddle.net/seB5F/1014/

Answer 1

以下是我为使其正常工作所做的工作:

• .outer - 删除了 position 属性。

• .containerBox - 完全删除了类。

• .container

  • 删除了 position 属性。

  • 添加了 white-space: nowrap; 和 overflow-x: scroll。

• .child

  • 删除了 position 和 float 属性。

  • 添加了display: inline-block。

• 添加了 .child:last-child 样式，从末尾删除了 margin-right: 25px;。

See working jsFiddle demo

---

HTML

<div class="outer">(other stuff here too)
    <div class="container">
        <div class="child">test 111</div>
        <div class="child">test 222</div>
    </div>
    <div class="container">
        <div class="child">test 333</div>
        <div class="child">test 444</div>
    </div>
</div>

CSS

.outer {
    width: 700px;
    height: 300px;
    margin-top: 15px;
}
.container {
    width: 100%;
    background-color: red;
    overflow-x: scroll;
    white-space: nowrap;
}
.child {
    display: inline-block;
    width: 700px;
    height: 300px;
    margin-right: 25px;
    background-color: blue;
}
.child:last-child {
    margin-right: 0;
}