css - 制作没有 float 的 CSS 网格

Question

正如标题所暗示的那样，我需要在不丢失 float 的情况下制作 CSS 网格，因为这会干扰 Waypoints JS 插件...

无论如何，我偶然发现了 display: inline-block; 但是如果网格中的框占据了容器宽度的 100% 这只有在将所有代码写在一行中时才有效( JSFiddle 1 )

由于我的元素是一个模板，我不能强制用户在一行中编写他的所有代码。

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

更新 1:

white-space: nowrap; 也没有帮助我，因为它搞砸了元素中的所有文本 ( JSFiddle 2 )

更新 2:

This font-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 规则:

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

有关 white-space 属性的更多信息，请参阅:http://www.quirksmode.org/css/whitespace.html