相关疑难解决方法(0)

我已经在某个地方读过这个<img>元素的行为.如果正确,有人可以用例子解释一下吗？

我正在尝试使用宽度设置为%的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)

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