HTML – 为什么这些内部div不对齐？

概述小提琴链接如下 #outer-container { border-top: 2px solid black; border-bottom: 2px solid black; background-color: #f0f0f0; padding-top: 5px; padding-bottom: 5px; overflow-x: scroll; 小提琴链接如下

#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 >      <div>a</div>    </div>    <div >      <div>b</div><div>bb</div>    </div>    <div >    </div>  </div>

http://jsfiddle.net/t4u1agwv/

我不确定为什么内部div不是全部对齐在外部div的顶部.任何帮助赞赏！

解决方法 由于它们是内联元素,因此您可以使用vertical-align属性来修复此问题.

此属性的默认值为baseline.这就是为什么第一个元素在第二个元素的文本的基础上对齐的原因.将属性更改为顶部/中间/底部等值将更改此设置.

Updated Example

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

总结

以上是内存溢出为你收集整理的HTML – 为什么这些内部div不对齐？全部内容，希望文章能够帮你解决HTML – 为什么这些内部div不对齐？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。