Question

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

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

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

.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＆amp;铬，最后一个.grid__item掉了下来。

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

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

有人可以为我解释一下吗？

Answer 1

内联块元素之间的空格

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

使用内联块进行布局的问题是，如果HTML标记之间的HTML源代码中有任何空格（在本例中为grid__item div），则会有3-4像素的水平在显示的元素之间添加间距。

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

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

内联块和浮点数的比较

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

每种用途的自然用途：

浮动：允许一段文本在元素周围流动（通常是图像）
内联块：在段落（like an image）中添加块内容，作为段落的一部分
CSS定位：将一个元素叠加在另一个元素之上（通常是弹出式窗口或下拉列表）
HTML表格：数据网格

从历史上看，由于缺乏其他选项，其中每一项都被迫用于布局。正如Eric Meyer所指出的那样here和here，因为能够清除浮动（允许它以更多种方式使用），因此浮动用于布局的原因。

选择合适的工具

因此，如果没有一个用于一般布局，你如何选择最好用的？

对于内联块，最强烈的论据是，如果它真的适合于一般布局，那么就不会出现这样的基本问题：在元素之间添加3-4 px的水平间距（这是在布置页面的主要区域时几乎从不需要 - 列的行为不应与文本段落中的单词相同。）

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

在实践中，我发现浮点数比内联块更可靠和可预测，尤其是在早期版本的IE上。浮动的主要麻烦是having to manually clear them。为CSS文件添加可靠的clearfix使得这样做相对易于管理。即使在现代CSS网格系统上，建立列的首选布局机制通常是浮点数（基于我到目前为止看到的）。

Answer 2

当我搜索“内联之间的空格”时，这是第一个链接：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

tl; dr删除列之间的任何空格。

Answer 3

此问题是由内联块元素视为单词引起的 - 因此可以通过为包装元素提供负字间距来进行模拟。关于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; }

如何摆脱内联块列之间不需要的空间？

3 个答案:

内联块元素之间的空格

内联块和浮点数的比较

选择合适的工具