使用 inline-block 构建网格框架

Question

我即将更新 http://getcrow.eu 并有一个 "issue" 来解决这个问题，这将使框架成为我一直想要的一切。

重要提示： Crow 不使用 tables、absolute positioning、floats 或 clearfix，它应该保持这种状态。

我们知道像这样将 inline-blocks 并排放置：

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

与 CSS:

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

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

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

（如果您想了解问题，请跳过）

HTML 和 children div 之间的评论。 No-go 因为：它会造成丑陋 HTML，开发人员使用 crow 必须意识到这一点并与之合作。
children 标签末尾换行/未使用结束标签。 No-go因为：同上
在 .parent-wrapper 上使用减号 (-) 页边距。 No-go 因为：指定的边距取决于文档字体大小，这意味着网格可能会在响应式标记中中断 where html { font-size:{X}px; } 变化。
设置 0px font-size 到 .parent 和 "reset" children 上的字体大小（这是我目前使用的方法） . No-go 因为：我不希望开发者使用 crow 来 force-set children。我只是希望继承是自然的，没有为我设置向下字体大小的网格。
使用 Javascript 从 .crow 元素中删除所有 white-spaces。 No-go 因为：我希望框架是纯的 CSS 并且没有 js。如果用户连接不良，这也可能 "flick" 页面加载后 DOM。
在 .parent 上加载 font-family 没有白色 space 的字体。 No-go 因为：加载额外的字体只是为了获得网格框架是错误的。特别是因为您必须下载额外的文件 (font-files) 并为所有浏览器声明回退。
在 .parent 上使用 letter-spacing -{X}px。 No-go 因为：与 .3 相同（见上文）
使用弹性框。 No-go 因为：该框架专注于垂直居中（如果需要的话），而 flex box 在这方面有自己的生命力。我也在确保网格支持它今天支持的 IE8。

所以基本上我正在寻找一个 - unknown/not 但我不知道的 discovered/way - 用于删除 inline-blocks 之间的白色 space。我希望它是纯粹的 CSS。如果您知道 of/think 可行的方法 - 我可以在不同的浏览器上尝试。

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

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

的框架

Answer 1

使用浮动是您的最佳选择。

.parent div {
    float: left;
}

根据您在下方的评论，您可以使用负边距。

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

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

Answer 2

InuitCSS（我最近选择的框架）使用类似的系统。与在网格系统中使用 display: inline-block; 一样美妙，似乎空白问题确实是一个固有问题；除了当前的变通办法之外，解决的可能性很小。

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

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

我还建议阅读本期，其中是因纽特人的创造者；哈里·罗伯茨 (Harry Roberts) 对这个问题的各种解决方案进行了权衡。虽然它可能不会告诉你任何你不知道的事情，但它是一个有趣的（如果过时的）讨论。

我知道以上可能无法解决您的问题，甚至无法说明问题，但希望对您有所帮助。

Building a grid framework with inline-block's