使用 inline-block 构建网格框架 [英] Building a grid framework with inline-block's

问题描述

我即将更新 http://getcrow.eu 并有一个问题"需要解决我一直想要的框架.

重要的是要知道:Crow 不使用 tables、absolute Positioning、floats 或 clearfix，它应该保持这种状态.

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

使用 CSS:

.parent {>分区 {显示:内联块；}}

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

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

(如果您想回答问题，请跳过)

<小时>

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 的框架.

解决方案

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

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

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

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

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

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

I'm about to update http://getcrow.eu and have one "issue" to solve that would make the framework everything I always wanted it to be.

Important to know: Crow does not use tables, absolute positioning, floats or clearfix'es and it should stay that way.

We know that putting inline-blocks next to each other like so:

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

with CSS:

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

Creates white-spaces between the blocks. We also know there's a handful of solutions to prevent the white-spaces from creating space, which is highly required if creating a grid framework with this method.

Beneath I list the methods that I'm aware of and why I don't want to/can't use them:

(SKIP IF YOU WANT TO GET TO THE QUESTION)

---

1. Comments in the HTML inbetween children div's. No-go because: it creates ugly HTML that the developer, using crow, must be aware of and work with.

2. Breaking lines at the end of children tags/ not using closing tags. No-go because: same as above

3. Using minus (-) margins on .parent-wrapper. No-go because: specified margins depends on document font size which mean the grid could break in responsive markup where html { font-size:{X}px; } changes.

4. Setting 0px font-size to .parent and "reset" the font size on children (this is the method I'm currently using). No-go because: I don't want the developer using crow to force-set the children. I just want the inheritance to be natural without a grid that's setting the font size downwards for me.

5. Using Javascript to remove all white-spaces from .crow elements. No-go because: I want the framework to be pure CSS and no js. This could also "flick" the DOM after pageload if user has bad connection.

6. Loading a font with font-family on .parent that has no white spaces. No-go because: loading in an extra font just to get the grid framework is just wrong. Especially as you have to download extra files (font-files) and declare fallbacks for all browsers.

7. Using letter-spacing -{X}px on .parent. No-go because: same as .3 (see above)

8. Using flex box. No-go because: the framework focuses on vertical centering (if desired) and flex box lives it own life when it comes to that. I'm also making sure the grid is supporting IE8 which it does today.

---

So basically I'm searching for a - unknown/not yet discovered/way that I'm not aware of - for removing white spaces in between inline-blocks. I want it to be pure CSS. If you have a method that you know of/think would work - I can try it on different browsers.

Resolving this would surely make Crow the best grid framework. I'm already using it for various websites and I can tell that the possibilites are many when given the ability to easily position elements center vertically.

Sidenote: Marking up the DOM like so: <div class="parent"><div>Block 1</div><div>Block 2</div></div> does the job just like I want it to. But that would require the developer using Crow to mark it up that way. And I don't want to rely on a framework creating that HTML.

解决方案

InuitCSS (my choice of framework lately) uses a similar system. As wonderful as the use of display: inline-block; is in a grid system, it does appear that the whitespace issue, is an inherent one; with little chance of resolution beyond the current workarounds.

I agree that the use of comments or closing tags does introduce some issues with CMS entries, and a certain amount of mental overhead for the developers involved; but not an unmanageable amount.

If you want to have a look at Inuit's grids I would recommend it's GitHub found here: https://github.com/inuitcss

I would also advise reading this issue, in-which Inuit's creator; Harry Roberts, weighs in on the various solutions this problem. Whilst it may not tell you anything you don't already know, it is an interesting (if outdated) discussion on the matter.

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

I know that the above may not solve your issue, or even shed any light on the matter, but I hope it can be of use.

这篇关于使用 inline-block 构建网格框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！