背后文本

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