两个内联块元素，每个元素的宽度为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/。但这不是理想的解决方案，因为两个div之间出现很小的间隙。
我能够解决问题的另一种方法是通过同时浮动两个div。参见http://jsfiddle.net/VptQm/。这很好。
但是我最初的问题仍然存在。为什么当两个div都作为内联块元素保留时，它们却不能并排放置？
米脂浏览 601回答 3
3回答
-
慕桂英3389331
使它们阻塞而不是内联块。这将使div忽略它们之间的空间。display:block;或删除标签之间的空间<div id='left'></div><div id='right'></div>或添加margin: -1en;到div之一以减轻单个渲染空间占用的空间。
随时随地看视频慕课网APP
Html/CSS