HTML 容器随着每个添加的 child 而扩展宽度 - 全部在一行中？

Question

如何强制 parent 扩大 child 的宽度。

HTML:

<div class="parent">
    <div class="child">
        1
    </div>
    <div class="child">
        2
    </div>
    <div class="child">
        3
    </div>
</div>

CSS:

.parent {

}
.child {
    width: 200em;
    float: left;
}

.child:nth-child(odd) {
background-color: red;
}

.child:nth-child(even) {
background-color: green;
}

我想要实现的目标:

+Parent-----------------+
| child child child ... |
+-----------------------+

我不想实现但我正在实现的:)

+Parent-+
| child |
| child |
| child |
+-------+

如果可能，最好不要使用表格和 flex 布局。

Answer 1

解释

我假设您不希望子元素换行。

首先，去掉 float: left 并将其替换为 display: inline-block。它实现了相同的目的，并且您没有将元素从文档流中移除。

接下来，在本例中的包含元素 .parent 上，添加 white-space: nowrap; 规则。这将阻止子元素在达到视口(viewport)宽度时环绕。

最终 CSS

.parent {
    white-space: nowrap;
}
.child {
    width: 200em;
    display: inline-block;
}

.child:nth-child(odd) {
    background-color: red;
}

.child:nth-child(even) {
    background-color: green;
}

JSFiddle