html - 将 2 个 div 并排放置时出现奇怪的行为

Question

我想将 2 个 div 彼此相邻并居中放置，如所述 here .问题是，当我放置 <span> 时，我的右边 div 似乎总是在左边的下面一点。和一个标题到正确的分区。为什么会发生这种情况，我该如何避免这种情况？

#right {
  display: inline-block;
  width: 100px;
  height: 160px;
  padding: 15px;
  background: rgba(0, 0, 0, .4);
  border-radius: 1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
#wrapper {
  text-align: center;
  padding: 40px;
  height: 160px;
  max-height: 160px;
}
#left {
  display: inline-block;
  width: 100px;
  height: 160px;
  padding: 15px;
  background: rgba(0, 0, 0, .4);
  border-radius: 1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}

<div align="center" id="wrapper">
  <div id="left"></div>
  <div id="right">
    <span style="text-decoration: underline;">Heading</span>
    <div id="some-content"></div>
  </div>
</div>

Answer 1

在#right 和#left div 上使用vertical-align:top; 以获得想要的结果

#right {
  display: inline-block;
  width: 100px;
  height: 160px;
  vertical-align:top;
  padding: 15px;
  background: rgba(0, 0, 0, .4);
  border-radius: 1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
#wrapper {
  text-align: center;
  padding: 40px;
  height: 160px;
  max-height: 160px;
}
#left {
  display: inline-block;
  vertical-align:top;
  width: 100px;
  height: 160px;
  padding: 15px;
  background: rgba(0, 0, 0, .4);
  border-radius: 1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}

<div align="center" id="wrapper">
  <div id="left"></div>
  <div id="right">
    <span style="text-decoration: underline;">Heading</span>
    <div id="some-content"></div>
  </div>
</div>