CSS基线问题

我们在铺页面的时候，总会遇到同一行的两个或多个div位置错乱或者内容对齐异常的情况，这往往是由于CSS基线问题导致的

问题描述

我们写了一段简单的代码：

效果如下：

此时没有任何问题，但是当我们修改某一个div的字体大小，或者两个div内容的行数不同时，则会出现如下情况，可以发现，我只是改了右边div的字体大小或者行数，但是左边盒子的位置却发生了变化：

问题原因

这是由于CSS默认的对其方式是基线对齐，也就是vertical-align:baseline，这种情况下元素会被放置在父元素的基线上，而父元素的基线则是由处于同一行的两个div共同决定的，可以简单的理解为字体小的会去顺应字体大的、行数少的会去顺应行数多的，所以在上面两个图中，左侧的div发生了变动，因为它字体小、行数少。

解决方法

既然是基线问题是由于默认的vertical-align:baseline导致的，那么我们把他改掉就可以了，比如设置为vertical-align:top，效果如下：

补充：基线到底是什么？

上文反复提到基线，那么基线到底是什么？基线是可以理解为钢琴五线谱中的其中一条线，这条线是这一行内容的基准，除了基线外，还有顶线、中线、底线。理解了这一点，看下图就额可以理解了：