我的布局类似于：

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

我希望div仅扩展到table宽度。

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

您需要一个具有 CSS 所谓的 “缩小至适合宽度” 的块元素，而规范并未提供一种获得这种效果的简便方法。在 CSS2 中，“缩小以适应” 不是目标，而是意味着处理浏览器 “必须” 凭空获得宽度的情况。这些情况是：

• 浮动
• 绝对定位的元素
• 内联块元素
• 表格元素

没有指定宽度时。我听说他们想在 CSS3 中添加您想要的东西。现在，请使用上述方法之一。

不直接公开功能的决定似乎很奇怪，但是有充分的理由。它是昂贵的。缩小至适合表示至少要格式化两次：在知道元素的宽度之前，不能开始格式化元素，并且无法计算整个内容的宽度。另外，人们并不需要像人们想像中那样频繁地使用 “缩小以适合” 元素。为什么您的桌子周围需要额外的 div？也许表格标题就是您所需要的。

我认为使用

display: inline-block;

可以，但是我不确定浏览器的兼容性。

另一个解决方案是将div包装在另一个div （如果要保持块的行为）：

HTML：

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS：

.yourdiv
{
    display: inline;
}

display: inline-block为您的元素增加了额外的边距。

我建议这样做：

#element {
    display: table; /* IE8+ and all other modern browsers */
}

奖励：现在，您只需添加margin: 0 auto ，就可以轻松地将新的#element居中。

display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack –对嵌入式块样式的跨浏览器支持（2007-11-19） 。

对我有用的是：

display: table;

在div 。 （在Firefox和Google Chrome上测试）。

您可以尝试fit-content （CSS3）：

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}

• 浏览器支持
• 规格

有两个更好的解决方案

1. display: inline-block;

   要么

2. display: table;

在这两个display:table;更好，因为display: inline-block;增加了额外的利润。

用于display:inline-block;您可以使用负边距方法来修复多余的空间

不知道在什么情况下，这将出现，但我相信，CSS-style 属性float要么left或right都会有这样的效果。另一方面，它也会有其他副作用，例如允许文本在其周围浮动。

如果我错了，请指正我，我不确定 100％，目前无法自己测试。

您的问题的答案在于未来我的朋友...

即 “intrinsic” 随 CSS3 最新更新一起发布

width: intrinsic;

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

有关它的更多信息： CSS 本质和外部大小调整模块级别 3 ， 可以使用吗？ ：内部和外部调整大小 。

现在，您必须将<span>或<div>设置为

display: inline-block;