两个内联块单元，每个50％宽，不能并排放在一行中
<!DOCTYPE html> <html> <head> <title>Width issue</title> <style type="text/css"> body { margin: 0; } #left { width: 50%; background: lightblue; display: inline-block; } #right { width: 50%; background: orange; display: inline-block; } </style> </head> <body> <div id="left">Left</div> <div id="right">Right</div> </body> </html> JSFiddle： http : //jsfiddle.net/5EcPK/
上面的代码试图将#left div和#right div并排放在一行中。 但是，正如你在上面的JSFiddle URL中看到的，事实并非如此。
我能够解决这个问题，将其中一个div的宽度降低到49％。 请参阅http://jsfiddle.net/mUKSC/ 。 但是这不是一个理想的解决scheme，因为两个div之间出现了一个小的差距。
我能解决这个问题的另一个方法是通过浮动这两个divs。 请参阅http://jsfiddle.net/VptQm/ 。 这工作正常。
但我原来的问题依然存在。 为什么当这两个div被保留为内联块元素时，它们并不相配？
使用inline-block元素时， 这些元素之间总是会有whitespace 问题 （空间大约为4px）。
所以，你的两个divs都有50％的宽度，再加上这个whitespace （〜4px）的宽度是100％以上，所以它就打破了。 你的问题的例子：
body{ margin: 0; /* removing the default body margin */ } div{ display: inline-block; width: 50%; } .left{ background-color: aqua; } .right{ background-color: gold; }
<div class="left">foo</div> <div class="right">bar</div>
在css3中的好答案是：
white-space: nowrap;
在父节点中，并且：
white-space: normal; vertical-align: top;
在div（或其他）在50％
例如： http : //jsfiddle.net/YpTMh/19/
编辑：
有另一种方式：
font-size: 0;
为父节点，并在子节点覆盖它
这是因为你的两个div之间的空白被解释为一个空格。 如果你把你的<div>标签按照下面的方式排列，则问题得到纠正 ：
<div id="left"></div><div id="right"></div>
因为元素之间有一个空格。 如果你删除所有的空白， 他们将适合 。
<div id="left">Left</div><div id="right">Right</div>
要么让他们阻止，而不是内联块。 这将使div忽略它们之间的空间。
display:block;
或删除标签之间的空间
<div id='left'></div><div id='right'></div>
或添加
margin: -1en;
到其中一个divs，以减轻单个空间的渲染空间。
可以通过添加css显示来完成：内联到包含内联元素的div。
使用具有负值的边距去除空白时，需要将其添加到此特定元素。 因为将它添加到一个类将会影响这个类已被使用的地方。
所以使用display会更安全：inline;
