html - 无法让 Div 并排渲染

Question

这是小提琴：http: //jsfiddle.net/vhcFw/

这是代码：

<div style='display:block-inline;height:100px;width:100px;background:red;'></div>
<div style='display:block-inline;height:100px;width:100px;background:blue;'></div>

本质上，我无法让 div 并排呈现（尤其是在使用内联样式时）。我意识到这是一个简单的错误，但我不知道如何解决它。提前致谢。

Answer 1

简单的语法错误。

display:inline-block不使用display:block-inline

在这里更新了 jsFiddle

请参阅 MDN - 显示属性。

---

或者，您也可以浮动元素。

jsFiddle在这里

Answer 2

只需添加 float:left.to 你的风格

<div style='display:block;height:100px;width:100px;background:red;float:left;'>   </div>
<div style='display:block;height:100px;width:100px;background:blue;float:left;'></div>

Answer 3

您可以让它们显示为默认值display: block;并添加float: left;. http://jsfiddle.net/vhcFw/2/