<!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保持为内联块元素时,它们并不适合并排？