CSS inline-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>

Answer 2

您是否尝试为每个网格项添加边距以将它们分开？

.half:nth-of-type(odd) {
  margin-right: 4%;
}