5

我刚刚看过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。

在此先感谢您的帮助。

4

4 回答 4

4

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

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

检查他们的演示源。

还更新了你的jsfiddle

于 2013-09-06T13:00:48.687 回答
1

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

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

于 2013-09-06T13:10:05.067 回答
0

您可以执行以下操作：

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

并在子项目上重置字间距

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

你可以签出这个小提琴。

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

于 2014-01-28T09:31:27.543 回答
0

如今，Flexbox 解决了这个问题。

您可以改为执行以下操作：

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

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

于 2017-10-12T09:40:18.937 回答