如何更改此HTML / CSS以使容器水平扩展到浮动的子项？

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/

（我已移除了overflow-x: hidden和containingBox上的outer，因此您可以看到问题。）

编辑：只有在父母之外添加父级才能看到它

这有效：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;
}

Answer 2

你的容器宽度为700px，每个孩子的宽度也是700px ......他们唯一适合的方法是垂直放置，因为两个孩子占用1400px，超出了容器的大小。您可以减小子项的宽度，也可以增加父项的宽度，这样多个子项就可以放在一行中。浮动：左边只试图将它们浮动到左侧，如果它们合适，否则你将它们放在不同的线上。