一排div，有一个div里面内容，造成div不在同一水平线上

原因

因为后面的盒子没有任何字符，此时它的基线就是它的底边缘，第一个盒子有文字，所以该盒子的基线就是文字的基线，二者基线对齐，现成如此效果。

解决方法

只要给这个div加一个vertical-align: top;,就可以将它的基线放到最上面和后面的div保持在同一水平线上

拓展

vertical-align 用来指定行内元素（inline，inline-block）或表格单元格（table-cell）元素的垂直对齐方式。

常用的对齐方法:

• baseline (以及 sub, super, text-top, text-bottom, , )
  使单元格的基线，与该行中所有以基线对齐的其他单元格的基线对齐。

• top
  使单元格内边距的上边缘与该行顶部对齐。

• middle
  使单元格内边距盒模型在该行内居中对齐。

• bottom
  使单元格内边距的下边缘与该行底部对齐。