如何使 div width 在其子元素结束时结束，而不是占用所有可用空间

Question

这可能很愚蠢，但我对html和css有点陌生。我有。。

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

.css：

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

这使得div 背景

宽度占用所有可用空间（到页面末尾），我想要的是div 蓝色背景在其子元素结尾处结束。

我对块/内联并不完全熟悉。 但是将内联应用于div 会使背景消失，应用 block 不会执行任何操作。 那么我该怎么做才能实现我想要的东西呢？

Answer 1

默认情况下，div元素显示为块。默认情况下，块拉伸到其容器宽度的 100%。如您所提到的，将它们设置为显示为inline将使它们拉伸到其内容的宽度，但是在inline和block之间有一个中间点： inline-block ：

div {
    display:inline-block;
}

JSFiddle demo.

Answer 2

使用内联块

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

Answer 3

试试这个：

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