网格系统和内联块间距

Question

我刚看到http://csswizardry.com/2013/02/introducing-csswizardry-grids/和它的演示(http://csswizardry.com/csswizardry-grids/).我认为这是解决CSS中网格的一种非常好的方法.所以我检查了源代码,看看它是如何完成的,我看到了一个小东西,我无法弄清楚它是如何完成的.

这个网格系统不是使用浮点数而是使用内联块元素,这是一件好事.但每次我使用内联块的百分比宽度列/网格等我有这个内联块间距.我知道有几种方法(主要是HTML中的更改)来摆脱这种间距:http://css-tricks.com/fighting-the-space-between-inline-block-elements/

但是在网格系统中我向你展示了没有那些修复(据我所见),如果检查源代码,仍然没有内联块间距.只是为了向您展示我在这里主要有的问题是一个快速的小提琴:http://jsfiddle.net/nN8mV/

HTML

<p>Floating columns (width 33.3%)</p>
<div class="grid cf">
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
</div>
<p>Inline Block columns (width 33.3%)</p>
<div class="grid grid--inlineblock">
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
</div>

CSS

.grid {
    margin-bottom: 20px;
}
    .grid__item {
        float: left;
        width: 33.3%;  
        background: red;
    }
    .grid--inlineblock .grid__item {
        float: none;
        display: inline-block;
    }

您可能知道,但由于这种间距,33.3%的宽度不起作用.网格系统似乎没有这个问题,尽管它也使用"display:inline-block".所以我的问题:CSS Wizardy如何解决这个问题？我无法理解并且改变HTML(参见上面的CSS Tricks链接)并不经常工作,因为CMS生成的内容或其他东西,你无法适应你的HTML.

在此先感谢您的帮助.

Answer 1

您链接的 Csswizardry 演示使用评论 html hack：

<div class="grid__item"></div><!--
--><div class="grid__item"></div>

检查他们的演示源。

还更新了你的jsfiddle