内联块不完全一样

Question

我的页面上有3个div，即css：display：inline-block。

.utilitiesContent div
{
    display: inline-block;
    width:33%;
}

这是fiddle（不要注意它有西里尔字母）。你可以看到它就像楼梯，不完全是一条线。如何使其具有相同的高度？

Answer 1

.utilitiesContent div
{
    display: inline-block;
    width:33%;
    vertical-align: top;
}

你正在寻找vertical-align财产，我用了顶级，你可以玩，看看你最喜欢什么。

updated fiddle here

我强烈建议使用width: 32%; 33%只是将它切得非常接近，并且在某些情况下可以跳到下一行

Answer 2

默认情况下，内联块会根据字体大小在元素之间放置空格。如果将字体大小减小到零，则可以删除间距。

.utilitiesContent div
{
    display: inline-block;
    width:33.33%;
    font-size:0;
    vertical-align: top;
}

然后只需将字体大小设置为inline-block元素内的元素。

看我的小提琴：http://jsfiddle.net/4ear5n8n/6/

Answer 3

.utilitiesContent div
{
    display: inline-block;
    width:32.5%;
}

<div class="utilitiesContent">
    <div>div 1</div>
    <div>div 2</div>
    <div>div 2</div>
</div>

DEMO只是将宽度减少到0.5％从33％减少到32.5％

.utilitiesContent div
{
    display: inline-block;
    width:32.5%;
}