css中display：inline-block错位问题

就目前来说，常用的布局方式有table、div，因为使用table都是比较规整、传统的布局方式，现在大部分网页为了美观，大多使用div进行布局，使用div布局就避免不了对块级元素的布局调整，在仿作百度日历的时候我发现，在使用两个同级div进行布局的时候，使两个div并排，常用的方法有：position定位、float：left、display：inline-block。而问题就出现在，我在使用display：inline-block进行布局时，两个等高等宽的div出现了错位，也就是这样：

        我在网上找了很多，多部分只给出了解决方案：vertical-align：top。后来终于找到一篇相关的，原来：我字都是用p标签设置的，而webstorm默认的给每个p标签都设置了一个默认属性：vertical-align：baseline。正是这个默认属性起了作用。baseline为基线对齐，也就是说显示的时候也是要两个div的基线进行对齐，左边的“宜”里边有五行，基线为最下边的“余事勿取”的底线，同理，右边的基线为“安葬”的底线，这样一来基线对齐，也就不会管你的div大小什么的，从而上下错位，当然，如果两边的行数相同，就不会错位。

解决方法：1）将baseline换掉，换成其他什么都行，top、bottom、middle......随便哪个都行(有的浏览器不兼容：inherit)，就可以解决了。

2）既然要基线对齐，我就给右边接着的又多加了两个p标签，字体大小不变，但是内容要用空格占位。这样也会对齐。

就像这样：

<p style="font-size: 12px">&nbsp;</p><p style="font-size: 12px">&nbsp;</p>

也可以解决问题。

       个人觉得，在使用两个div进行布局时，多使用float。