网格系统和内联块间距答案

【问题标题】：Grid System and Inline-Block spacing网格系统和内联块间距
【发布时间】：2013-09-06 11:58:03
【问题描述】：

我刚刚看过 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% 的宽度不起作用，因为这个间距。网格系统似乎没有这个问题，尽管它也使用“显示：内联块”。所以我的问题是：CSS Wizardy 是如何解决这个问题的？我想不通，并且更改 HTML（请参阅上面的 CSS 技巧链接）并不经常起作用，因为 CMS 生成的内容或其他内容，您无法调整您的 HTML。

提前感谢您的帮助。

【问题讨论】：

标签： html grid css spacing

【解决方案1】：

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

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

查看他们的演示源。

还更新了您的jsfiddle

【讨论】：

哦，我的错，完全监督源内部的 cmets。我太专注于 CSS 了 :) 谢谢，这回答了我的问题。

【解决方案2】：

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

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

【讨论】：

你是对的，但这种方法有很多缺点（Safari 5 + 搜索引擎 + 旧 Android）。据我所知，目前还没有好的 CSS 修复，所以我们现在必须坚持使用 HTML cmets...
是的，我知道。我只是指出 css “hacks”，因为发帖人说他无法更改 HTML。

【解决方案3】：

您可以执行以下操作：

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

并在子项上重置字间距

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

您可以结帐thisfiddle。

我不确定这是否是最好的技术，但它似乎运作良好。

【讨论】：

谢谢，但不幸的是它总是取决于您使用的字体。据我所知，目前还没有可靠的 CSS hack。您现在需要删除 HTML 中的空格。但这效果很好。
啊，我的错，但我想这是一种解决方法，直到有人找到更好的东西，如果你不喜欢使用 cmets。
在 Flexbox 获得体面的支持之前，需要有人提出解决方案。在那之后，我们可能不需要网格系统的 inline-block / floats :)

【解决方案4】：

Flexbox 现在解决了这个问题。

您可以改为：

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

这应该可以解决间距问题。

【讨论】：