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>