<!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都作为内联块元素保留时，它们却不能并排放置？
慕桂英3389331