如何制作一个足够大的盒子以容纳某个元素？

时间：2013-02-17 18:59:25

标签： html css

考虑这样的文件：

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

图像（在我的情况下，它实际上是一个ad-hoc生成的嵌入式SVG）具有事先未知的大小。封闭div的宽度是否足够大以容纳图像（即下面的段落与上图中的宽度相同）？

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

2 个答案:

答案 0 :(得分：3)

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

HTML：

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

CSS：

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

结果将如下所示：

enter image description here

JS Fiddle Example

答案 1 :(得分：1)

您可以使用float来容纳容器

<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的实际渲染大小

希望能提供帮助..

相关问题
最新问题