显示：内联制作en元素消失

Question

所以我有这段代码：

HTML：

<div id="blue"></div>
<div id="red"></div>

CSS：

#blue{
    width:100px;
    height:100px;
    background-color:blue;
    margin-left:50%;
}

#red{
    width:100px;
    height:100px;
    background-color:red;
}

结果如下：

所以我将display:inline添加到#blue，期望两者都在同一行。结果很奇怪：

为什么会这样？我首先想到#blue仍在#red之后，但似乎并非如此。

Answer 1

设置width元素的height和display: inline不会影响它。 See this SO answer.

将两个框设置为内联显示可达到您想要的效果inline-block。 JSFiddle