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

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

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

---

我对block/inline不太熟悉。但是将inline应用于div会使背景消失，而应用block则不会起任何作用。那么我该怎么做才能实现我想要的呢？

默认情况下

div

元素显示为块。默认情况下，块拉伸到其容器宽度的100%。正如您所提到的，将它们设置为显示为

inline

将使它们延伸到其内容的宽度，但是

inline

和

block

之间有一个中间点：

inline block

：

div {
    display:inline-block;
}

.

使用内联块

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

试试这个：

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

---

显示：内联块可能重复的
div {
 background: blue;
 display:inline-block
 }
div img {
 float: left;
}

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