3

我正在尝试使用宽度设置为 % 的 CSS 网格（因此我可以响应地使用它）并且不使用浮点数（个人不喜欢！）。

在本例中，我使用了添加了适当变量的csswizardry-grids。您可以查看 github 页面上链接的演示。

没有提到为网格分配宽度的“容器”类，所以我添加了带有最大宽度的 .container（这也是 csswizardry-grids 演示所具有的）（为以后的其他断点做准备）。容器具有左右填充以允许 .grid__item 内的 padding:left 。

.container {
    margin: 0 auto;
    padding: 0 $gutter;
    max-width: 960px;
}

scss：

.grid__item {
    display: inline-block;
    padding-left: 32px;
    vertical-align: top;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.desk--one-third { width: 33.333%; }

还要注意 box-sizing:border-box 不在任何其他元素上，除了由 csswizardry-grids.scss 指定的元素。

我的标记：

<div class="container"> 
    <div class="grid">
        <div class="grid__item desk--one-third">
            <h1>Column 1</h1> 
        </div>
        <div class="grid__item desk--one-third">
            <h1>Column 2</h1> 
        </div>
        <div class="grid__item desk--one-third">
            <h1>Column 3</h1> 
        </div>
    </div>
</div>

问题：在 firefox、safari 和 chrome 中，最后一个 .grid__item 消失了。

我所看到的：'.grid__item' 之间至少有几个像素的神秘差距。见附件截图：

！（http://dl.getdropbox.com/u/7408773/Screen%20Shot%202013-05-10%20at%2012.51.06%20AM.png）

任何人都可以为我解释一下吗？

4

3 回答 3

15

行内块元素之间的空白

听起来您正在使用display: inline-block列，而不是浮动它们。

使用 inline-block 进行布局的问题在于，如果 HTML 源代码中的 HTML 标签（在本例中为grid__itemdiv）之间存在任何空白，则显示的元素之间将增加 3-4 像素的水平间距。

inline-block 旨在将块内容添加到段落流中。出现这种间距的原因与在段落中的 2 个单词之间添加 3-4 px 的原因相同：它为段落中的一系列内联元素提供了它们通常预期具有的间距量。

没有真正跨浏览器和安全的 CSS 解决方案（尽管负左边距最接近）。有一些方法可以编辑 HTML 代码来防止这种情况（删除源代码中标签之间的空格），但它们会带来可维护性问题（当其他人工作时，很难识别问题的高风险会在以后出现代码），并且它显着损害了内容和表示的分离（假设源代码格式的更改会影响显示页面的格式）。

内联块和浮点数的比较

浮动和内联块都具有不适合一般布局的缺点（例如，在页面流中创建可变高度的列）。可以说 CSS 定位和 HTML 表格也不适合一般布局（或者至少不适合它）。

每个的自然用途：

  • 浮动：允许一段文本围绕元素（通常是图像）流动
  • inline-block：在段落内添加块内容（如图像），作为段落的一部分
  • CSS 定位：将一个元素叠加在另一个元素之上（通常是弹出式或下拉式）
  • HTML 表格：数据网格

从历史上看，由于缺乏其他选项，它们中的每一个都被迫用于布局。正如 Eric Meyer 在这里和这里指出的那样，浮动最终被用于布局的原因是因为能够清除浮动（这允许它以更广泛的方式使用）。

选择正确的工具

因此，如果两者都不是用于一般布局的，那么您如何选择最好的使用呢？

总的来说，反对 inline-block 的最有力论据是，如果它真的适合一般布局，就不会有像元素之间添加 3-4 px 水平间距这样的基本问题（这几乎是不想要的在布置页面的主要区域时——列的行为不应与文本段落中的单词相同）。

在特定情况下，可以应用一个简单的规则：对于 3-4 px 产生问题的情况，表明使用 inline-block 是不合适的。同样，对于 3-4 像素不会造成问题的情况，这表明它可能是一个合理的选择。

在实践中，我发现浮动比 inline-block 更加可靠和可预测，尤其是在早期版本的 IE 上。花车的主要麻烦是必须手动清除它们。向 CSS 文件添加可靠的 clearfix 使得这样做相对易于管理。即使在现代 CSS 网格系统上，建立列的首选布局机制通常是浮动（基于我目前所见）。

于 2013-05-09T19:23:38.103 回答
1
于 2013-05-09T19:23:16.230 回答
0

这个问题是由被视为单词的 inline-block 元素引起的 - 因此可以通过为包装元素提供负的单词间距来模拟它。关于word-spacing: -4px;为我工作的 Chrome/IE9/FF :) - 但是 - 请记住 - 这是一种解决方法。

HTML：

<div class="wrapper">
    <div class="inliner">01</div>
    <div class="inliner">01</div>
    <div class="inliner">01</div>
</div>

CSS：

.inliner{ display: inline-block; }
.wrapper{ word-spacing: -4px; }
于 2013-10-06T11:52:42.880 回答