关于块宽..这里发生了什么

Question

见上图和我的CSS：

.activity {
    width: 70%;
    margin: 0 auto;
}

.activity .head {
    margin-top: 3%;
    text-align: center;
}

.activity .body {
    margin-top: 3%;
}

为什么两个内联块都不能在同一行？

<div class="body" style="background-color:red"> 
    <div style="background-color:green; display:inline-block; width:50%">
    </div> 
    <div style="background-color:blue; display:inline-block; width:49.6%">
    </div> 
</div>

当我将第二个块宽度设置为49.6%时，为什么它会从下一行开始？

Answer 1

内联块之间的空白字符会占用一些空间，因此会增加行框上的总宽度。

如果你在HTML代码中将内联块元素保持在一起，那么它就像你期望的那样工作。

＆＃13;

＆＃13;

.body div {
  height: 40px;
  vertical-align: top;
}

＆＃13;

<div class="body" style="background-color:red"> 
<div style="background-color:green; display:inline-block; width:50%"></div><div style="background-color:blue; display:inline-block; width:50%"></div> 
</div>

＆＃13;

＆＃13;

＆＃13;