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

Answer 2

如果您无法更改HTML，则必须提供容器font-size: 0并重置列中的font-size或为列添加负边距（可能很麻烦）。

更多细节： http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

您可以执行以下操作：

.grid--inlineblock {
   word-spacing: -4px;
}

在子项上重置字间距

.grid--inlineblock .grid__item {
    float: none;
    display: inline-block;
    word-spacing: normal;
}

您可以结帐this小提琴。

我不确定这是否是最好的技术，但似乎效果相当好。

Answer 4

Flexbox solves this problem nowadays.

You could do the following instead:

.grid--inlineblock .grid__item {
        display: flex;
}

And that should resolve the spacing issues.

网格系统和内联块间距

4 个答案: