如何使div不大于其内容？

我的布局类似于：

<div>
    <table>
    </table>
</div>

我希望div只扩展到表的宽度。

当前回答

只需设置宽度和高度以适合内容。这很简单。

div {

    width: fit-content;
    height: fit-content;
    padding: 10px;

}

我正在添加填充：10px；。如果省略了它，div元素将完全与表保持一致，看起来有点笨拙。填充将在元素的边界与其内容之间创建给定的空间。但这是你的愿望，不是强制性的。

其他回答

我尝试了div.classname｛display：table cell；｝，结果成功了！

第二部分{宽度：配合内容；}＜div＞<表></table></div>

在Firebug中我发现了属性值-moz fit content，它完全符合OP的要求，可以如下使用：

width: -moz-fit-content;

虽然它只在Firefox上运行，但我找不到其他浏览器（如Chrome）的等效版本。

评论中提到了这一点，在其中一个答案中很难找到：

如果出于任何原因使用display：flex，则可以改用：

div {
    display: inline-flex;
}

这在浏览器中也得到广泛支持。

你的问题的答案在于未来，我的朋友。。。

即“内在”将随最新的CSS3更新而来

width: intrinsic;

不幸的是IE落后于它，所以它还不支持它

更多信息：CSS内部和外部尺寸模块级别3和我可以使用吗？：内在和外在尺寸。

现在，您必须满足＜span＞或＜div＞设置为

display: inline-block;

推荐文章