html - テキストの背後に背景色がある複数の div

Question

テキストの後ろに背景色を入れようとしています。このような複数の要素があります。

私が経験している現在の問題は、背景色をテキストに「合わせる」ために、「display: inline」プロパティを使用していることです。ただし、問題は、次の要素については、同じ行ではなく、新しい行に表示する必要があることです。

現在の状況:

必要な方法:

これが私が始めた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;
}

助けてください。

score 2 · Accepted Answer

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;
}

score 2 · Accepted Answer

を使用display: tableします。インラインブロックと同じシュリンクラッププロパティがありますが、要素が独自の行に表示されるように強制します。

body {
    margin: 10px;
}

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

フロートを使用する場合とは異なり、レイアウトで問題が発生する可能性があるクリアについて心配する必要はありません。

score 1 · Accepted Answer

divをフロートして両方をクリアするだけです

.text {
  float:left;
  clear:both;
  display: block;
  background: black;
  color: white;
  padding: 5px;
  margin:5px;
}

4 に答える 4