不能让Divs并排渲染

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

Updated jsFiddle here

See MDN - 显示属性。

---

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

jsFiddle here

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/