CSS-HTML：内联框的扩展是否比预期的大？

我正在创建我的第一个博客模板

我想在维基百科的文章段落旁边有像维基百科那样的内联图片。我通过以下代码实现了这一点：

<div class="photo">
    <img src="image_file.jpg">
</div>
div[class='photo'] {
    margin: 10px;
    float: left;
    clear: left;
}
img {
    max-width: 500px;
    min-width: 150px;
    margin: 8px;
}

div[class='photo']{
利润率：10px；
浮动：左；
清除：左；
}
img{
最大宽度：500px；
最小宽度：150px；
利润率：8px；
}

到目前为止，一切正常。但是，我还想在图像文件下面添加一个标题，因此我在

<div class="photo">
    <img src="image_file.jpg">
    <p>Caption for the image file which might be long</p>
</div>

图像文件的标题，可能很长

不幸的是，此

使此照片div比照片本身扩展得更大，从而使其看起来很有趣。我希望它的

最大宽度

与照片一样大，如果文本较大，请转到第二行或第三行

我怎样才能做到这一点？我试过

width:auto；显示：块

，将

放入另一个div，但失败

谢谢你的帮助

另外，我知道一旦页面通过JS加载，我就可以解决这个问题，但我很想学会用正确的CSS方式来解决它。谢谢

试试这个-

HTML

<div class="photo">
    <img src="image_file.jpg">
    <p>Caption for the image file which might be long</p>
</div>

---

如果问题只是

div

宽度大于

img

宽度，您可以尝试将

p

移出

#photo

并将两者放入另一个

div

中：

<div class="photoBox">
    <div class="photo">
        <img src="image_file.jpg">
    </div>
    <p>Caption for the image file which might be long</p>
</div>

---

真棒的佐尔坦！非常感谢你。所以这里的关键是使p为绝对值？不客气：）是的，将其设置为绝对值，然后将其放置在父级内部，使其不超过该值

div.photoBox {
    margin: 10px;
    float: left;
    clear: left;
}
img {
    max-width: 500px;
    min-width: 150px;
    margin: 8px;
}