我无法解决这个问题。
我可以通过浮动来实现它,但我想了解为什么会发生这种情况。
代码:
.container {
width: 1000px;
height: 400px;
background-color: purple;
position: relative;
}
.item {
height: 100px;
display: inline-block;
}
.item.left {
width: 70%;
background-color: green;
}
.item.right {
width: 30%;
background-color: orange;
}

<div class="container">
<div class="item left"></div>
<div class="item right"></div>
</div>
&#13;
答案 0 :(得分:2)
如果您认为为什么不要它们并排放置,那是因为内联元素对代码中的空白区域很敏感。删除div之间的空格,它们并排排列在同一条线上:
.container {
width: 1000px;
height: 400px;
background-color: purple;
position: relative;
}
.item {
height: 100px;
display: inline-block;
}
.item.left {
width: 70%;
background-color: green;
}
.item.right {
width: 30%;
background-color: orange;
}
&#13;
<div class="container">
<div class="item left"></div><div class="item right"></div>
</div>
&#13;