html - 使用可能なすべてのスペースを使用する代わりに、子要素が終了したときに div 幅を終了させる方法は?

Question

これはばかげているかもしれませんが、私はhtmlとcssが初めてです。私は持っている..

 <div>
 <img src="#" alt="img">
 <p>Lorem ipsum</p>
 </div>

CSS:

 div {
 background: blue;
 }
 div img {
 float: left;
 }

これにより、div の背景幅が (ページの最後まで) 利用可能なすべてのスペースを占有します。私が望むのは、div の青い背景がその子要素の終わりで終了することです。

私はブロック/インラインに精通していません。ただし、インラインを div に適用すると背景が消え、ブロックを適用しても何も起こりません。それで、私が探しているものを達成するために何をしますか？

Answer 1

デフォルトでdivは、要素はブロックとして表示されます。デフォルトでは、ブロックはコンテナの幅の 100% まで伸びます。あなたが言及したように、 as を表示するように設定すると、コンテンツの幅に合わせて引き伸ばされますが、 :と:inlineの間に中間点があります。inlineblockinline-block

div {
    display:inline-block;
}

JSFiddle デモ。

Answer 2

インラインブロックを使用する

div {
 background: blue;
 display:inline-block
 }
div img {
 float: left;
}

Answer 3

これを試して：

 div {
    background: blue;
    display: inline-block;
 }
 div img {
     float: left;
 }