CSS 谜题：Children 不断分成多行

Question

也许更有经验的人知道在这里做什么，因为我不确定这是否可以通过 CSS 或任何其他方式实现。目前我有一个 parent（100% 宽度）和几个 child 元素。所有这些 children 都需要保持在一行中，所以当 parent 溢出时，它就可以水平滚动了。至于现在，当 parent 的宽度变得太小时，child 元素会继续移动到多行。该片段包含与现在完全相同的 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>

CSS 谜题：Children 不断分成多行

CSS puzzle: Children keep breaking into multiple rows

css

overflow

multiple-columns