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