CSS-两个inline-block元素出现上下错位

在布局的过程中，有时候会出现这样一种情况。被同一父级（block）包裹的几个行内块（inline-block）元素并没有水平对齐，而是上下错位，类似于：

遇到这种情况，第一反应一般就是很懵逼，“WTF？？？我啥也没干啊？！”
其实是因为对齐的基线不同的原因，非常好解决，只需要一行代码，使用vertical-align，具体的vertical-align取什么值，由具体需要而定。
比如上面的例子：
加一条vertical-align：bottom；就OK了

(END)