css - 关于 block 宽度..这里发生了什么

Question

见上图和我的 CSS:

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

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

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

为什么两个行内 block 不能在同一行？

<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>

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

Answer 1

行内 block 之间的空白字符占用了一些空间，结果增加了行框的总宽度。

如果您在 HTML 代码中将行内 block 元素保持相邻，那么它会按您预期的那样工作。

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

<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>