我的布局类似于:

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

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


当前回答

解决方案是将div设置为display:inline块。

其他回答

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

div {

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

}

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

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

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

width: intrinsic;

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

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

现在,您必须满足<span>或<div>设置为

display: inline-block;

个人而言,我只是这样做:

HTML代码:

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

CSS代码:

div {
    display: inline;
}

如果在div上应用浮点数,它也会起作用,但显然,您需要在下一个HTML元素中应用“清除两者”的CSS规则。

width:1px;
white-space: nowrap;

对我来说很好:)

我通过在div标记中添加span标记,并将CSS格式从外部div标记移动到新的内部span标记,解决了一个类似的问题(我不想使用display:inline块,因为项目居中)。如果display:inline块不是适合您的答案,那么就把它作为另一个备选方案。