<!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/。但这不是一个理想的解决方案，因为两个div之间会出现一个小差距。
我能够解决问题的另一种方法是浮动两个div。见http://jsfiddle.net/VptQm/。这很好。
但我原来的问题仍然存在。为什么当两个div都保持为内联块元素时，它们不能并排放置？
答案 0 :(得分：123)
使用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>
有几种方法可以解决这个问题：
<强> 1。这些元素之间没有空格
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>
<强> 2。使用HTML评论
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>
第3。将父级font-size设置为0，然后为inline-block元素添加一些值
body{
margin: 0; /* removing the default body margin */
}
.parent{
font-size: 0; /* parent value */
}
.parent > div{
display: inline-block;
width: 50%;
font-size: 16px; /* some value */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="parent">
<div class="left">foo</div>
<div class="right">bar</div>
</div>
<强> 4。在它们之间使用负边距（not preferable）
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
margin-right: -4px; /* negative margin */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="left">foo</div>
<div class="right">bar</div>
<强> 5。降低关闭角度
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>
<hr>
<div class="left">foo</div><div class="right">
bar</div>
<强> 6。跳过certain HTML结束标记（感谢@thirtydot reference）
body{
margin: 0; /* removing the default body margin */
}
ul{
margin: 0; /* removing the default ul margin */
padding: 0; /* removing the default ul padding */
}
li{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<ul>
<li class="left">foo
<li class="right">bar
</ul>
参考文献：
作为@MarcosPérezGude said，最佳方式是使用rem，并在{{1}上向font-size添加一些默认值标签（如HTML5Boilerplate中所示）。例如：
html更新：因为它接近2018.使用flexbox甚至更好 - CSS grid layout。
答案 1 :(得分：20)
css3中的好答案是：
white-space: nowrap;
，并且：
white-space: normal;
vertical-align: top;
在div（或其他）50％
例如：http://jsfiddle.net/YpTMh/19/
编辑：
还有另一种方式：
font-size: 0;
表示父节点，并在子节点中覆盖它
答案 2 :(得分：6)
这是因为你们两个div之间的空格被解释为一个空格。如果您将<div>标记排成一行，如problem is corrected：
<div id="left"></div><div id="right"></div>
答案 3 :(得分：4)
要么阻止它们而不是内联块。这将使div忽略它们之间的空格。
display:block;
或删除标签之间的空格
<div id='left'></div><div id='right'></div>
或添加
margin: -1en;
到其中一个div，以减轻渲染单个空间占用的空间。
答案 4 :(得分：4)
因为元素之间有空格。如果删除所有空格they will fit。
<div id="left">Left</div><div id="right">Right</div>
答案 5 :(得分：1)
可以通过添加css显示来实现：内联到包含内联元素的div。
在使用带负值的边距去除空白区域时，有必要将其添加到此特定元素。将它添加到类中会影响已使用此类的位置。
因此使用display：inline;
会更安全答案 6 :(得分：1)
Flexbox示例-这将用于包含两个并排元素的父类。
.parentclass {
display: flex;
justify-content: center;
align-items: center;
}
答案 7 :(得分：1)
请检查以下代码：
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
float:left;
}
#right {
width: 50%;
background: orange;
display: inline-block;
float:left;
}<div id="left">Left</div>
<div id="right">Right</div>
答案 8 :(得分：0)
向两个div标签添加 float：left; 。
div {
float: left;
}