html - 为什么这些内部 div 不对齐？

Question

fiddle 链接如下

  #outer-container {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    background-color: #f0f0f0;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow-x: scroll;
    white-space: nowrap;
  }
  #outer-container .inner-container {
    width: 75vw;
    min-height: 100px;
    border: 1px solid black;
    display: inline-block;
  }

  <div id="outer-container">
    <div class="inner-container">
      <div>a</div>
    </div>
    <div class="inner-container">
      <div>b</div><div>bb</div>
    </div>
    <div class="inner-container">
    </div>
  </div>

http://jsfiddle.net/t4u1agwv/

我不确定为什么内部 div 没有全部对齐到外部 div 的顶部。任何帮助表示赞赏!

Answer 1

因为它们是 inline 元素，您可以使用 vertical-align 属性来解决这个问题。

此属性的默认值为 baseline。这就是为什么第一个元素在第二个元素文本的底部对齐的原因。将属性更改为诸如 top/middle/bottom 之类的值将改变这一点。

Updated Example

#outer-container .inner-container {
    width: 75vw;
    min-height: 100px;
    border: 1px solid black;
    display: inline-block;
    vertical-align:top;
}