在涉及到两个<div>元素并列显示的效果时，一般有两种方法：
1.使用float元素让元素并联显示；
2.将块状的<div>元素display设置为inline-block，使其成为线性块状元素，从而具备线性元素的特点，达到并列显示目的；
由于float元素具有：脱离文本流以及使父元素高度塌陷的特性，谨防对后续布局产生影响，故不选用；
但是，将<div>元素inline-block化，由于两个元素遵循其默认的基线对齐的方式，故两个并列显示的<div>元素出现空白部分（如下图）
要解决这个问题，可：
1.将两个<div>元素display：inline-block后，将其vertical-align对齐方式设置为top或者bottom；
2.将第二个<div>元素设置样式：font-size：0；后期再对第二个<div>中的内容的字体分个设置即可；
效果图如下：
两个<div>元素已对齐；空白部分消失