使用 inline-block 构建网格框架

Question

我即将更新 http://getcrow.eu 并有一个“问题”要解决，这将使框架成为我一直想要的样子。

重要的是要知道： Crow 不使用 tables、absolute positioning、floats 或 clearfix'es，它应该保持这种状态。

我们知道像这样将内联块放在一起：

<div class="parent">
  <div>Block 1</div>
  <div>Block 2</div>
  <div>Block 3</div>
</div>

使用 CSS：

.parent {
  > div {
    display: inline-block;
  }
}

在块之间创建空白。我们还知道有一些解决方案可以防止空白创建空间，如果使用这种方法创建网格框架，这是非常需要的。

下面我列出了我知道的方法以及我不想/不能使用它们的原因：

（如果您想回答问题，请跳过）

---

1. 子 div 之间的 HTML 中的注释。 不可行，因为：它创建了丑陋的 HTML，使用 crow 的开发人员必须了解并使用它。

2. 子标签末尾的换行符/不使用结束标签。 不行，因为：同上

3. 在 .parent-wrapper 上使用减号 (-) 边距。 不可行，因为：指定的边距取决于文档字体大小，这意味着网格可能会在响应标记中中断，其中 html { font-size:{X}px; } 项更改。

4. 将 0px 字体大小设置为 .parent 并“重置”子代的字体大小（这是我目前使用的方法）。 不可行，因为：我不希望开发人员使用 crow 来强制设置孩子。我只是希望继承是自然的，没有为我设置向下字体大小的网格。

5. 使用 Javascript 从 .crow 元素中删除所有空格。 不可行，因为：我希望框架是纯 CSS 而没有 js。如果用户连接不好，这也可能在页面加载后“轻弹”DOM。

6. 在没有空格的 .parent 上加载带有 font-family 的字体。 不可行，因为：加载额外的字体只是为了获取网格框架是错误的。尤其是当您必须下载额外的文件（字体文件）并为所有浏览器声明后备时。

7. 在 .parent 上使用字母间距 -{X}px。 不可行，因为：与 .3 相同（见上文）

8. 使用弹性盒子。 不可行，因为：该框架专注于垂直居中（如果需要），而弹性盒子在这方面过着自己的生活。我还确保网格支持 IE8，就像它今天所做的那样。

---

所以基本上我正在寻找一种 - 未知/尚未发现/我不知道的方式 - 用于删除内联块之间的空白。我希望它是纯 CSS。如果您有一种您知道/认为可行的方法 - 我可以在不同的浏览器上尝试。

解决这个问题肯定会让 Crow 成为最好的网格框架。我已经在各种网站上使用它，而且我可以说，当能够轻松地将元素垂直居中定位时，可能性很多。

旁注： 像这样标记 DOM：<div class="parent"><div>Block 1</div><div>Block 2</div></div> 就像我想要的那样完成工作。但这需要使用 Crow 的开发人员以这种方式进行标记。而且我不想依赖创建该 HTML 的框架。

Answer 1

InuitCSS（我最近选择的框架）使用了类似的系统。就像在网格系统中使用display: inline-block; 一样美妙，看起来空白问题是一个固有的问题；除了当前的解决方法之外，几乎没有解决的机会。

我同意使用 cmets 或结束标签确实会给 CMS 条目带来一些问题，并给所涉及的开发人员带来一定的精神开销；但不是无法控制的数量。

如果您想查看因纽特人的网格，我建议您在 GitHub 上找到： https://github.com/inuitcss

我还建议阅读这个问题，因纽特人的创造者； Harry Roberts，权衡了这个问题的各种解决方案。虽然它可能不会告诉你任何你不知道的事情，但它是一个有趣的（如果过时的）关于这个问题的讨论。

https://github.com/csswizardry/inuit.css/issues/170

我知道以上内容可能无法解决您的问题，甚至无法说明问题，但我希望它可以有用。

Answer 2

使用浮点数是您的最佳选择。

.parent div {
    float: left;
}

按照下面的 cmets，您可以使用负边距。

.parent div {
    margin-left: -4px;
}

但这可能会将浏览器更改为浏览器。