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

Question

考虑这样的文档：

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

图像（在我的情况下，它实际上是嵌入的 SVG 临时生成的）具有事先不知道的大小。封闭的 div 的宽度怎么可能刚好足以容纳图像（即下面的段落以与上面的图像相同的宽度中断）？

这是对这个问题的跟进。我目前正在处理的代码可以在这里找到。板上方的文字应与板具有相同的宽度。

score 3 · Accepted Answer

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

HTML：

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

CSS：

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

结果将如下所示：

在此处输入图像描述

score 1 · Accepted Answer

您可以使用浮动来适应容器

<div style="float:left;background:yellow;">
    <img ...>
    <p>...</p>
</div>

或者您可以尝试（不适用于 IE7 ......但您可能可以修复它）

<div style="display:inline;display:inline-block;background:yellow;">
    <img ...>
    <p>...</p>
</div>

较新的 Mozilla 和 webkit 浏览器有

<div style="width:fit-content;margin:0 auto;background:yellow;">
   <img ...>
    <p>...</p>
</div>

我不确定您的 SVG 会发生什么，但在<svg>声明中您可以指定矢量 AFAIK 的实际渲染大小

希望有帮助..

2 回答 2