制作CSS电网无浮

正如标题会建议我需要做一个CSS网格不失浮动，因为这将与航点JS插件干扰......制作CSS电网无浮

不管怎样，我偶然发现display: inline-block;但如果在网格盒子拿起容器的宽度的100％，如果你写的所有在一行代码才能这样（JSFiddle 1）

因为我的项目是一个模板，我不能只需强制用户将他的所有代码写入一行。

有什么办法可以解决这个问题吗？

UDATE 1：

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

UDATE 2：

Thisfont-size: 0;解决方案不帮助我，因为我也需要在父元素

来源

2013-02-11 Noah Wetjen

更新：

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

来源

2013-02-11 23:17:39

哈，我9秒太慢了。 – Petah 2013-02-11 23:18:10

white-space：nowrap;并不能帮助我，因为它将元素[JSFiddle]（http://jsfiddle.net/Asustaba/zygnz/1439/）中的所有文本搞砸了，但是感谢回答 – 2013-02-11 23:34:53

我已经用工作更新了我的答案因为divs需要包含文本。 – 2013-02-12 00:03:37

CSS技巧使用inline-block

时，对去除多余的空白一篇大文章

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

来源

2013-10-20 06:46:21

制作CSS电网无浮

回答

相关问题