display:inline block元素不在同一水平线的解决方法

页面布局出现了错位元素不在同一水平线的情况，后发现是使用了display:inline block;的原因。

原样式代码：

.site-item{
    display: inline-block;
    margin:20px 1.5%;
    width: 33.3%;
    }

使用了上面代码就出现了元素不在同一水平线的情况，一开始让我不得其解。

经过查找相关资料，说是因为display:inline-block是一种介于inline和block的东西，而它也和inline属性一样，存在基准线的问题，尝试了添加 vertical-align: top;后解决了元素不在同一水平线高度不一的问题。

.site-item{
    display: inline-block;
    vertical-align: top;
    margin:20px 1.5%;
    width: 33.3%;
    }

另外也可以尝试float:lef，如果用float布局，不用inline-block也是不会出现这种情况。