html - 文本后面有背景颜色的多个 div

Question

我正在尝试在文本后面添加背景颜色。我会有多个这样的元素。

我遇到的当前问题是，为了让背景颜色“适合”文本，我使用了“显示：内联”属性。但是，问题是对于下一个元素，我需要它显示在新行上，而不是在同一行上。

它的电流是：

我如何需要它：

这是我开始的 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

将 div 显示为 inline-block 并在它们之间添加换行符。

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 2

使用display: table，它具有与 inline-block 相同的 shrinkwrap 属性，但强制元素出现在自己的行上。

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

body {
    margin: 10px;
}

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

与使用浮动不同，您不必担心清除，这有时会导致布局出现问题。

Answer 3

只需浮动 div 并清除两者

.text {
  float:left;
  clear:both;
  display: block;
  background: black;
  color: white;
  padding: 5px;
  margin: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;
}

一旦您了解正在发生的事情，只需使用该方法即可。
阅读有关浮动的更多信息 - 克里斯·科耶 (Chris Coyer)