为什么向 div 添加内容会使它们不对齐？

Question

我想将一些 div 并排放置在父 div 中，该父 div 本身包含在父 div 中。基本上是这样的（所有子 div 都需要有固定的宽度）。

HTML
<div class = "wrapper">
  <div class = "wrapper1">
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child">hello</div>
    <div class = "child"></div>
    <div class = "child"></div>
 </div>
 <div>
 ....other content
 </div>
</div>

最初，我尝试浮动子 div，但我还希望将包装 div 设置为水平滚动，以防子 div 超出宽度。使用浮动它们只是包裹到下一行。所以我在包装器 div 上使用了 white-space: nowrap 并将子 div 设置为内联块显示。但问题是，这只适用于所有子 div 都有一些内容或所有子 div 都没有内容时，否则它们垂直不对齐。 这里的工作示例： https://jsfiddle.net/xj4pr7m8/16/

CSS 代码如下：

.wrapper {
  height: 100px;
  width: 500px;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, 1);
  /* white-space: nowrap; */
}

.wrapper1 {
  width: 100%;
  white-space: nowrap;
}

.child{
  width: 150px;
  height: 80px;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 1);
} 

此外，如果我将 white-space: nowrap 添加到 wrapper1 或 wrapper 或两者中，它确实会改变任何内容。有人可以解释为什么 div 会根据内容错位吗？除了放置一些占位符文本并将其设置为对空子 div 透明之外，还有什么可能的解决方案。

Answer 1

您缺少垂直对齐属性，将其设置为顶部，一切顺利，您还可以根据此属性将其他值应用于该属性

https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

.wrapper {
    height: 100px;
    width: 500px;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, 1);
    /* white-space: nowrap; */
}

.wrapper1 {
  width: 100%;
  white-space: nowrap;
}

.child{
    width: 150px;
    height: 80px;
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 1);
    vertical-align:top;
}

<div class = "wrapper">
  <div class = "wrapper1">
    <div class = "child">hello</div>
    <div class = "child">hello</div>
    <div class = "child"></div>
    <div class = "child">hello</div>
    <div class = "child">hello</div>
  </div>
  <div>
  ...other content
  </div>
</div>

Answer 2

另一种方法是将  添加到空 div 中，这样就可以解决问题。当然它使用占位符“文本”，但没有额外的 CSS 规则。

.wrapper {
    height: 100px;
    width: 500px;
    overflow-x: auto;
    overflow-y: auto;
    white-space: nowrap;
}

.child{
    width: 150px;
    height: 80px;
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 1);
}

<div class = "wrapper">
    <div class = "child">hello</div>
    <div class = "child">hello</div>
    <div class = "child">&nbsp;</div>
    <div class = "child">hello</div>
    <div class = "child">hello</div>
</div>