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

Question

我正在尝试使用宽度设置为%的css网格(因此我可以响应地使用它)并且不使用浮动(个人不喜欢!).

在这个例子中,我使用csswizardry-grid并添加了适当的变量.您可以在github页面上查看链接的demo.

没有提到为网格分配宽度的"容器"类,所以我添加了.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和chrome中,最后一个.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__itemdiv),则在显示的元素之间将添加3-4像素的水平间距.

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

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

内联块和浮点数的比较

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

每种的自然用途:

• 浮动:允许一段文本在元素周围流动(通常是图像)
• inline-block:在段落中添加块内容(如图像),作为段落的一部分
• CSS定位:将一个元素叠加在另一个元素之上(通常是弹出窗口或下拉列表)
• HTML表格:数据网格

从历史上看,由于缺乏其他选择,其中每一项都被迫用于布局.正如埃里克迈耶在这里和这里指出的那样,浮动用于布局的原因是因为能够清除浮子(允许它以更多种方式使用).

选择合适的工具

因此,如果没有一个用于一般布局,您如何选择最佳使用？

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

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

在实践中,我发现浮点数比内联块更可靠和可预测,特别是在早期版本的IE上.浮子的主要麻烦是必须手动清除它们.为CSS文件添加可靠的clearfix使得这样做相对易于管理.即使在现代CSS网格系统上,建立列的首选布局机制通常是浮动(基于我到目前为止所看到的).