製作CSS電網無浮

Question

正如標題會建議我需要做一個CSS網格不失浮動，因爲這將與航點JS插件干擾......

不管怎樣，我偶然發現display: inline-block;但如果在網格盒子拿起容器的寬度的100％，如果你寫的所有在一行代碼才能這樣（JSFiddle 1）

因爲我的項目是一個模板，我不能只需強制用戶將他的所有代碼寫入一行。

有什麼辦法可以解決這個問題嗎？

UDATE 1：

white-space: nowrap;並不能幫助我可能是因爲它搞砸了所有的文本元素中（JSFiddle 2）

UDATE 2：

Thisfont-size: 0;解決方案不幫助我，因爲我也需要在父元素

Answer 1

更新：

Working example on jsFiddle。

將font-size: 0;設置爲父元素，然後在包含元素上將其設置回所需大小將解決該問題。此外，請務必在包含元素上使用vertical-align: top;，這樣不等行的文本將從頂部的相同位置開始。

注意：如果您需要兩個div出現在相同的高度（由於背景顏色，圖像等），您需要使用faux columns technique。

.left { 
    background: red; 
    height: 140px; 
    width: 55%; 
    margin: 0 5% 0 0; 
    display: inline-block; 
    font-size: 14px; 
    vertical-align: top; 
} 
.right { 
    background: orange; 
    height: 140px; 
    width: 40%; 
    display: inline-block; 
    font-size: 14px; 
    vertical-align: top; 
} 
section { 
    background: black; 
    width: 100%; 
    margin: 0 0 20px; 
    color: #ffffff; 
    font-size: 0; 
} 

如果修復的div不包含文本：

Working example on jsFiddle。

添加white-space: nowrap;的部分規則：

section { 
    background: black; 
    width: 100%; 
    margin: 0 0 20px; 
    white-space: nowrap; 
} 

有關white-space屬性的更多信息，請參見：http://www.quirksmode.org/css/whitespace.html

Answer 2

CSS技巧使用inline-block

時，對去除多餘的空白一篇大文章

http://css-tricks.com/fighting-the-space-between-inline-block-elements/