在css中重叠的块

Question

我在一个需要在线显示的块中有2个块，但是当我给予在线显示时它不起作用。

小提琴：http://jsfiddle.net/8T5RZ/

我需要并排显示2块侧，而不是重叠

HTML：

<div class="outer-container"> 
    <div class="inner-container"> 
     <div class="innermost-container" /> 
     <div class="innermost-container" /> 

    </div> 
</div> 

CSS

.innermost-container{ 
    background-color:green; 
    width:100px; 
    height:100px; 
    border-style:solid; 
    border-width:5px; 
} 

Answer 1

变化

<div class="innermost-container" /> 

到

<div class="innermost-container"></div> 

<div />无效的HTML标记。

写：

.innermost-container{display:inline-block;} 

注：元素之间

inline-block毕业生空白。在同一行写入元素以避免空白。

写：

<div class="innermost-container"></div><div class="innermost-container"></div> 

，而不是

<div class="innermost-container"></div> 
<div class="innermost-container"></div> 

DEMO here.

Answer 2

你不能自我关闭一个div元素。即使它们是空的，你也需要明确地关闭</div>标签。所以关闭它们比使用display: inline-block;为.innermost-container

.innermost-container{ 
    background-color:green; 
    width:100px; 
    height:100px; 
    border-style:solid; 
    border-width:5px; 
    display: inline-block; /* Can also use float */ 
} 

Demo

---

从今以后，你可以用this工具来验证您的标记。

Answer 3

1）您不能自闭div标签（<div />）和2）设置你的div的显示属性设置为inline-block的：

display:inline-block; 

jsFiddle example

Answer 4

Display:inline不会在意尺寸，所以它会包装上的内容：http://jsfiddle.net/8T5RZ/7/