html - 如何让一个盒子足够大以容纳里面的某个元素？-6ren

html - 如何让一个盒子足够大以容纳里面的某个元素？

转载作者：搜寻专家更新时间：2023-10-31 08:19:57

考虑这样一个文档:

<DOCTYPE html>
<html><head><title>test</title></head>
<body>
<div>
<img src="..." alt="" style="clear:both" />
<p>Lorem ipsum...</p>
</body></html>

图像(在我的例子中，它实际上是一个嵌入式 SVG 临时生成)的大小是事先不知道的。封闭的 div 的宽度怎么可能刚好足以容纳图像(即下面的段落与上面的图像宽度相同)？

这是 this question 的后续行动.我目前正在处理的代码可以找到 here .白板上方的文字应与白板具有相同的宽度。

最佳答案

这可以使用 display:table 和设置的最小宽度来完成。我在下面的示例中使用了 width:1px，但任何最小宽度都可以。

HTML:

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

CSS:

div {
    width: 1px;
    display: table;
}

结果看起来像这样:

enter image description here

关于html - 如何让一个盒子足够大以容纳里面的某个元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14924824/

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章