滚动我自己的简单3列网格，我的数学出错了哪里？

Question

@nColumns: 3;
@sSurfaceWidth: 960px;
@sGutter: 10px;
@sBaseEntityWidth: (@sSurfaceWidth / @nColumns) - (@sGutter * 4);
@sBaseEntityHeight: 200px;

.entity {
    display: inline-block;
    position: relative;
    margin: @sGutter;

    &.small {
        width: @sBaseEntityWidth;
        height: @sBaseEntityHeight;
    }
    &.medium {
        width: (@sBaseEntityWidth * 2) + (@sGutter * 2);
        height: @sBaseEntityHeight;
    }
    &.large {
        width: (@sBaseEntityWidth * 3) + (@sGutter * 4);
        height: @sBaseEntityHeight;
    }
}

这是结果（为强调增加了黄线）：

更新：删除阴影以确保不会导致问题。

Answer 1

它将在inline-block元素之间添加空格。创建inline-block网格时，每个li之间的标记中不需要空格。

这通常是通过两种方式之一实现的。删除它：

<li>Item 1</li><li>Item 2</li>

可以将其格式化为可读性，如下所示：

<li>
    Item 1
</li><li>
    Item 2
</li>

或使用HTML注释删除空格：

<li>Item 1</li><!--
--><li>Item 2</li>

这是使用inline-block进行布局的一个缺点，但是一旦你知道了这个技巧，它就不是什么大问题了。它只是让你的标记看起来很难看！

使用内联块进行布局的另一个技巧：将声明vertical-align:top添加到.entity项目中。这消除了垂直空白，并在项目具有不同高度时修复了对齐问题。

Answer 2

感谢@Jonathan Nicol的回答，但是如果有其他人发现这一点，这里有一个巧妙的方法来解决这个问题而不影响可读性。在父元素上将font-size设置为0，为suggested in this SO question。