布局无法按预期工作（块级元素，宽度：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/

Answer 2

“display：inline-block”属性添加额外空格。如果你使用“float：left”而不是“display：inline-block”会更好，但是你可以在左边和右边添加一个负边距以消除额外的空格。例如。 “保证金：0-2px;”。

Answer 3

所以只需使用显示表格设置内容，然后使用显示为表格单元格的侧边栏和所需宽度

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


 .sidebar {
     display : table-cell;
     width: 50%;
     margin: 0;
     padding: 0;
 }