css - 向 div 添加文本使 div 向下移动

Question

我有以下代码，它并排显示 7 个 div，类似于条形图。

.wrapper {
  width: 100vw;
  height: 50vw;
  text-align: center;
}

.bar {
  width: 50px;
  height: 50px;
  margin: 10px;
  background: red;
  display: inline-block;
}

<div class="wrapper">
  <div class="bar" style="height: 200px"></div>
  <div class="bar" style="height: 130px"></div>
  <div class="bar" style="height: 180px"></div>
  <div class="bar" style="height: 230px"></div>
  <div class="bar" style="height: 150px"></div>
  <div class="bar" style="height: 160px"></div>
  <div class="bar" style="height: 190px"></div>
</div>

但是，当我在其中一个 div 添加一些文本时，整个 div 会向下移动。

.wrapper {
  width: 100vw;
  height: 50vw;
  text-align: center;
}

.bar {
  width: 50px;
  height: 50px;
  margin: 10px;
  background: red;
  display: inline-block;
}

<div class="wrapper">
  <div class="bar" style="height: 200px"></div>
  <div class="bar" style="height: 130px"></div>
  <div class="bar" style="height: 180px">some text</div>
  <div class="bar" style="height: 230px"></div>
  <div class="bar" style="height: 150px"></div>
  <div class="bar" style="height: 160px"></div>
  <div class="bar" style="height: 190px"></div>
</div>

如何阻止 div 向下移动？

Answer 1

只需设置栏的vertical-align，问题就应该得到解决。

解释:当垂直对齐设置为与基线相关的任何内容时，就会出现此问题，因此:baseline、sup、sub、长度和百分比值，以及默认值(基线)。

解决此问题的值为:middle、top、bottom、text-top、文本底部。您可以从其中进行选择，但您很可能只需要前三个。

.wrapper {
  width: 100vw;
  height: 50vw;
  text-align: center;
}

.bar {
  width: 50px;
  height: 50px;
  margin: 10px;
  background: red;
  display: inline-block;
  vertical-align: bottom;
}

<div class="wrapper">
  <div class="bar" style="height: 200px"></div>
  <div class="bar" style="height: 130px"></div>
  <div class="bar" style="height: 180px">some text</div>
  <div class="bar" style="height: 230px"></div>
  <div class="bar" style="height: 150px"></div>
  <div class="bar" style="height: 160px"></div>
  <div class="bar" style="height: 190px"></div>
</div>