CSS拼图：孩子们不断分成多行

Question

也许更有经验的人知道在这里做什么，因为我不确定这是否可以通过 CSS 或任何其他方式实现。目前我有一个父元素（100% 宽度）和几个子元素。所有这些子元素都需要保持在一行中，因此当父元素溢出时，它就可以水平滚动了。就目前而言，当父元素的宽度变得太小时，子元素会不断移动到多行中。 sn-p 包含与现在完全相同的 CSS，但我也尝试过 display: inline-block; 而不是 float: left;。

.container {
    padding: 16px 24px;
    width: 100%;
}
.parent {
    padding: 24px 24px 16px 24px;
    overflow-y: hidden;
    overflow-x: scroll;
    width: 100%;
}
.child {
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.10);
    background-color: grey;
    margin-bottom: 16px;
    border-radius: 4px;
    margin-right: 24px;
    height: 255px;
    width: 175px;
    float: left;
    padding: 0;
}

<div class="container">
  <div class-"parent">
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
  </div>
</div>

Answer 1

这应该在 CSS 中工作：

.parent {
    white-space: nowrap;
    overflow: auto;
}
.child {
    display: inline-block;
}

不要忘记删除 float: left 并溢出 x/y。

.container {
    padding: 16px 24px;
    width: 100%;
    white-space: nowrap;
}
.parent {
    padding: 24px 24px 16px 24px;
    width: 100%;
}
.child {
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.10);
    background-color: grey;
    margin-bottom: 16px;
    border-radius: 4px;
    margin-right: 24px;
    height: 255px;
    width: 175px;
    padding: 0;
    display: inline-block;
}

<div class="container">
  <div class-"parent">
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
    <div class="child">
    </div>
  </div>
</div>