CSS - 水平溢出和内联块

Question

我试图用水平溢出和滚动（侧滚动）显示div的内容。我的方法是将white-space: nowrap应用于父级，将display: inline-block应用于子级div。

我首先尝试使用空的孩子div并按预期工作。

＆＃13;

＆＃13;

.parent-div {
  width: 100vw;
  height: 50vh;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.child-div {
  display: inline-block;
  position: relative;
  width: 25%;
  height: 100%;
  margin-right: 5vw;
  background: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

接下来，我尝试了带有文字内容的孩子div，这也很好。

＆＃13;

＆＃13;

.parent-div {
  width: 100vw;
  height: 50vh;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.child-div {
  display: inline-block;
  position: relative;
  width: 25%;
  height: 100%;
  margin-right: 5vw;
  background: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

最后，我尝试使用包含和不包含文字内容的子div，但这导致孩子div文字内容垂直移位。

＆＃13;

＆＃13;

.parent-div {
  width: 100vw;
  height: 50vh;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.child-div {
  display: inline-block;
  position: relative;
  width: 25%;
  height: 100%;
  margin-right: 5vw;
  background: red;
}

＆＃13;

<div class="parent-div">
  <div class="child-div">Child 1</div>
  <div class="child-div"></div>
  <div class="child-div">Child 3</div>
  <div class="child-div"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

所以我的问题是这种行为的原因是什么，以及如何解决这个问题。

Answer 1

内部div的高度完全相同，您可以通过浏览器Web检查器找到，问题是垂直对齐，display: inline-block;触发值为baseline的{​​{3}}默认。添加此项以修复：

.child-div {
  vertical-align: top;
}

.parent-div {
  width: 100vw;
  height: 50vh;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.child-div {
  display: inline-block;
  position: relative;
  width: 25%;
  height: 100%;
  margin-right: 5vw;
  background: red;
  vertical-align: top;
}

<div class="parent-div">
  <div class="child-div">Child 1</div>
  <div class="child-div"></div>
  <div class="child-div">Child 3</div>
  <div class="child-div"></div>
</div>