为什么这些内部的div没有对齐？

Question

小提琴链接在下面

  #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;
}