Question

正如标题所示我需要制作一个CSS网格而不会丢失 float ，因为这会干扰 Waypoints JS插件 ......

无论如何，我偶然发现了display: inline-block;，但是如果网格中的方框占据了容器宽度的100％，那么只有在一行中写下所有代码时才有效（ {{3} } ）

由于我的项目是模板，我不能强迫用户在一行中写下他的所有代码。

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

Udate 1：

white-space: nowrap;对我没有帮助，因为它会搞砸元素中的所有文字（ JSFiddle 1 ）

Udate 2：

JSFiddle 2 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 {
    background: black;
    width: 100%;
    margin: 0 0 20px;
    white-space: nowrap;
}

有关white-space媒体资源的详情，请参阅：http://www.quirksmode.org/css/whitespace.html

Answer 2

CSS Tricks有一篇关于在使用inline-block

时删除多余空格的文章

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

制作没有浮动的CSS网格

2 个答案: