Html 如何使一个盒子足够大以容纳里面的某个元素？_Html_Css

Html 如何使一个盒子足够大以容纳里面的某个元素？

html css

Html 如何使一个盒子足够大以容纳里面的某个元素？,html,css,Html,Css,考虑这样一个文档： <DOCTYPE html> <html><head><title>test</title></head> <body> <div> <img src="..." alt="" style="clear:both" /> <p>Lorem ipsum...</p> </body&g

考虑这样一个文档：

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


测试
同侧眼线

图像（在我的例子中，它实际上是一个嵌入式SVG生成的临时图像）的大小是事先未知的。封闭div的宽度如何可能刚好足以容纳图像（即，下面的段落以与上面图像相同的宽度断开）

这是一项后续行动。可以找到我当前正在处理的代码。电路板上方的文本应与电路板具有相同的宽度。

您可以使用float来安装容器

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

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

而较新的mozilla和webkit浏览器

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

我不确定SVG会发生什么，但是在

声明中，您可以指定向量AFAIK的实际渲染大小

希望能有所帮助

这可以通过使用

display:table

和设置最小宽度来实现。我在下面的示例中使用了

width:1px

，但任何最小宽度都可以

HTML:

结果如下所示：

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

实际上，我后来使用某种javascript设置了宽度。如果我只需要在一个地方改变宽度就好了。

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

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