1. 子 div 之間的 HTML 中的注釋.不可行，因為:它創(chuàng)建了丑陋的 HTML，使用 crow 的開發(fā)人員必須了解并使用它.

2. 子標簽末尾的換行符/不使用結(jié)束標簽.不行，因為:同上

3. 在 .parent-wrapper 上使用減號 (-) 邊距.不可行，因為:指定的邊距取決于文檔字體大小，這意味著網(wǎng)格可能會在響應標記中中斷，其中 html { font-size:{X}px;} 項更改.

4. 將 0px 字體大小設置為 .parent 并重置"子代的字體大小(這是我目前使用的方法).不可行，因為:我不希望開發(fā)人員使用 crow 來強制設置孩子.我只希望繼承是自然的，沒有為我設置向下字體大小的網(wǎng)格.

5. 使用 Javascript 從 .crow 元素中刪除所有空格.不可行，因為:我希望框架是純 CSS 而沒有 js.如果用戶連接不好，這也可能在頁面加載后輕彈"DOM.

6. 在沒有空格的 .parent 上加載帶有 font-family 的字體.不可行，因為:加載額外的字體只是為了獲取網(wǎng)格框架是錯誤的.尤其是當您必須下載額外的文件(字體文件)并為所有瀏覽器聲明后備時.

7. 在 .parent 上使用字母間距 -{X}px.不可行，因為:與 .3 相同(見上文)

8. 使用彈性盒子.不可行，因為:該框架專注于垂直居中(如果需要)，而彈性盒子在這方面過著自己的生活.我還確保網(wǎng)格支持 IE8，就像它今天所做的那樣.

<小時>

所以基本上我正在尋找一種 - 未知/尚未發(fā)現(xiàn)/我不知道的方式 - 用于刪除內(nèi)聯(lián)塊之間的空格.我希望它是純 CSS.如果您有一種您知道/認為可行的方法 - 我可以在不同的瀏覽器上嘗試.

解決這個問題肯定會讓 Crow 成為最好的網(wǎng)格框架.我已經(jīng)在各種網(wǎng)站上使用它，并且我可以說，當能夠輕松地將元素垂直居中定位時，可能性很多.

旁注:像這樣標記 DOM:<div class="parent"><div>Block 1</div><div>Block 2</div></div>就像我想要的那樣工作.但這需要使用 Crow 的開發(fā)人員以這種方式進行標記.而且我不想依賴創(chuàng)建該 HTML 的框架.

InuitCSS(我最近選擇的框架)使用了類似的系統(tǒng).就像在網(wǎng)格系統(tǒng)中使用 display: inline-block; 一樣美妙，看起來空白問題是一個固有問題；除了當前的解決方法之外，幾乎沒有解決的機會.

我同意評論或結(jié)束標簽的使用確實會給 CMS 條目帶來一些問題，并給所涉及的開發(fā)人員帶來一定的精神開銷；但不是無法控制的數(shù)量.

如果您想查看因紐特人的網(wǎng)格，我建議您在 GitHub 上找到:https://github.com/inuitcss

我還建議閱讀這個問題，因紐特人的創(chuàng)造者；Harry Roberts，權(quán)衡了這個問題的各種解決方案.雖然它可能不會告訴你任何你不知道的事情，但它是一個有趣的(如果過時的)關(guān)于這個問題的討論.

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.

這篇關(guān)于使用 inline-block 構(gòu)建網(wǎng)格框架的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！