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

如果你想保留你的花车你可以在容器上使用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的工作原理。

Answer 2

显示元素之间的空格。想象一下<strong>Hello</strong> <em>world</em>。这显示为＆＃34; Hello world ＆＃34;。查看Hello和World之间的空格。

将一个输入和多个空格折叠为一个空格。

  <strong>Hello</strong>
  <em>world</em>

成为＆＃34; 您好世界＆＃34;。

你的div正在发生同样的事情。它们都是屏幕的50％，但空间也占用10个像素，将第二个div推到下一行。

有几种方法可以解决这个问题。使用float，使用display: table-cell或（通常更喜欢）使用XML注释消除div之间的空格。

<div id="content">
    <div id="action">
        <div id="buy" class="action">Buy</div><!--
     --><div id="sell" class="action">Sell</div>
    </div>
    <div id="other">test</div>
</div>

如何在没有浮动的情况下将div放在另一个旁边？

2 个答案:

See the fiddle