背後文本

Question

背景色多個div我試圖把後面的文字的背景顏色。我會有這樣的多個元素。

我遇到現在的問題是，有背景色「適合」的文字，我使用的是「顯示：內聯」屬性。然而，問題是，下一個元素，我需要它出現在一個新的生產線，而不是在同一條線上。

它是如何電流是：

我怎麼需要它：

這裏的的jsfiddle我開始：http://jsfiddle.net/KFYyd/5/

HTML：

<div class="text">This is text.</div> 
<div class="text">This is text.</div> 

CSS：

.text { 
    display: inline; 
    background: black; 
    color: white; 
    padding: 5px; 
} 

請幫助。

Answer 1

只是漂浮在兩個

​​

Answer 2

顯示的div和清晰的div作爲內聯塊和它們之間添加換行符。

HTML：

<div class="text">This is text.</div><br> 
<div class="text">This is text.</div> 

CSS：

.text { 
    display: inline-block; 
    background: black; 
    color: white; 
    padding: 5px; 
    margin-bottom: 5px; 
} 

Answer 3

使用display: table，它具有inline-block的相同拆封性，但迫使元素出現在自己的行。

http://jsfiddle.net/KFYyd/5/

body { 
    margin: 10px; 
} 

.text { 
    display: table; 
    background: black; 
    color: white; 
    padding: 5px; 
} 

與使用花車，你就不必擔心結算，有時可能會導致佈局問題。

Answer 4

添加clearfix後本身來清除浮動。這在元素水平堆疊的情況下非常有用。

HTML：

<div class="text">This is text.</div> 
<div class="clearfix"></div> 
<div class="text">This is text.</div> 

CSS：

.text { 
    display: inline; 
    background: black; 
    color: white; 
    padding: 5px; 
    margin: 5px; 
} 

.clearfix { 
    *zoom: 1; 
} 

.clearfix:before, .clearfix:after { 
    display: table; 
    line-height: 0; 
    content: ""; 
} 

.clearfix:after { 
    clear: both; 
} 

只需使用方法，一旦你明白髮生了什麼。
Read more about float - by Chris Coyer