html - CSS 内联 block 充当 float

Question

我目前正在使用 inline-block instead of floats 构建一个使用漂亮网格结构的站点.

简而言之，我的网格是这样工作的(JSFiddle) :

HTML

<div class="grid">
    <div class="half">
        <p>Here's some content</p>
    </div>
    <div class="half">
        <p>Here's some content</p>
    </div>
    <div class="half">
        <p>Here's some content</p>
    </div>
    <div class="half">
        <p>Here's some content</p>
    </div>
</div><!-- .grid -->

CSS

.grid {
    text-align: justify;
    font-size: 0;
}
.grid:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.half {
    width: 48%;
    display: inline-block;
    vertical-align: top;
}

现在，如果我们看一下这个页面:http://bit.ly/1AJM9Qt , 它在 JSFiddle 中正常工作.

但是，当我在此页面上使用完全相同的方法时:http://bit.ly/1zezIIx ，每个 div 就像应用了 float 而不是 inline-block 一样。每个 div 应该平均分配。

我真的看不出这两个页面有什么不同，也不明白为什么会这样。

Answer 1

bit.ly/1zezIIx 在 div 之间没有空格，因此它们无法调整以适应父宽度。如果您在 div 之间添加一个空格，它们应该按照您期望的方式运行。

没有空格的例子(内容不合理)

.grid {
    text-align: justify;
    font-size: 0;
}
.grid:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.half {
    width: 48%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 4%;
    background: red;
}
p {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.75;
}

<div class="grid"><div class="half"><p>Here's some content</p></div><div class="half"><p>Here's some content</p></div><div class="half"><p>Here's some content</p></div><div class="half"><p>Here's some content</p></div></div>

带空格的例子(内容是合理的)

.grid {
    text-align: justify;
    font-size: 0;
}
.grid:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.half {
    width: 48%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 4%;
    background: red;
}
p {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.75;
}

<div class="grid">
    <div class="half">
        <p>Here's some content</p>
    </div>
    <div class="half">
        <p>Here's some content</p>
    </div>
    <div class="half">
        <p>Here's some content</p>
    </div>
    <div class="half">
        <p>Here's some content</p>
    </div>
</div>