html - 如何在没有 float 的情况下将 div 一个接一个地放置？

Question

我设法使用 float: left 将两个 div 并排放置，但下面的 div 显示不正确:http://jsfiddle.net/N4kE3/2/

每个 div 都有这个 css:

display: inline-block;
width: 50%;

参见:http://jsfiddle.net/N4kE3/3/

他们是一个高于另一个。我必须将 width: 49% 设置为一个并排放置。

这怎么可能？

Answer 1

如果你想保留你的 float ，你可以在容器上使用 clearfix:

Working demo

#action:after {
    content: "";
    display: table;
    clear: both;
}

如果您希望使用inline-block，您需要删除标记中的空白区域:

Working demo

这个..

    <div id="action">
        <div id="buy" class="action">Buy</div>
        <div id="sell" class="action">Sell</div>
    </div>

变成...

<div id="action">
    <div id="buy" class="action">Buy</div><div id="sell" class="action">Sell</div>
</div>

.. 否则在计算 50% + 50% + 空白 = 大于 100% 的宽度时将考虑空白。这就是 inline-block 的工作原理。