0

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

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

CSS：

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

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

我对块/内联并不完全熟悉。但是对 div 应用内联会使背景消失，应用块什么也不做。那么我该怎么做才能实现我想要的呢？

4

3 回答 3

1

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

div {
    display:inline-block;
}

JSFiddle 演示。

于 2013-10-16T22:03:18.067 回答
0

尝试这个：

 div {
    background: blue;
    display: inline-block;
 }
 div img {
     float: left;
 }
于 2013-10-16T22:03:58.903 回答
0

使用内联块

div {
 background: blue;
 display:inline-block
 }
div img {
 float: left;
}
于 2013-10-16T22:03:27.317 回答