布局无法按预期工作(块级元素,宽度:50%)

Question

有人可以解释为什么以下代码不起作用？

http://jsfiddle.net/eL9hpcL9/

HTML

<div id="content">
    <div class="sidebar">1</div>
    <div class="sidebar">2</div>
</div>

CSS

#content {
    padding:0;
    margin:0;
}


.sidebar {
    width: 50%;
    display: inline-block;
    margin: 0;
    padding: 0;
}

我希望侧边栏可以并排,但它们不是.我甚至不知道从哪里开始.我知道我可以使用float: left,但我怎样才能使用它inline-block？

Answer 1

你必须删除div之间的空白区域,因为它也被计算,不要让50%的宽度工作.

<div id="content">
    <div class="sidebar">1</div><!--
    --><div class="sidebar">2</div>
</div>

小提琴:http://jsfiddle.net/eL9hpcL9/1/