3

正如标题所暗示的那样，我需要制作一个 CSS Grid 而不会丢失float，因为这会干扰Waypoints JS Plugin ...

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

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

有没有办法解决这个问题？

日期1：

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

日期2：

此 font-size: 0;解决方案对我没有帮助，因为我还需要父元素中的文本

4

2 回答 2

5

更新：

jsFiddle 上的工作示例。

将 a 设置font-size: 0;为父元素，然后在包含元素上将其设置回所需的大小将解决问题。还要确保vertical-align: top;在包含元素上使用，这样不相等的文本行都将从顶部的相同位置开始。

注意：如果您需要两个 div 以相同的高度出现（由于背景颜色、图像等），您需要使用仿列技术。

.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 不包含文本，请修复：

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-11T23:17:39.220 回答
1

CSS Tricks 有一篇很棒的文章，关于在使用时删除多余的空白inline-block

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

于 2013-10-20T06:46:21.783 回答