我的布局类似于:

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

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


当前回答

只需将样式放入CSS文件

div { 
    width: fit-content; 
}

其他回答

对我有用的是:

display: table;

(在Firefox和Google Chrome上测试)。

我认为使用

display: inline-block;

但我不确定浏览器的兼容性。


另一种解决方案是将您的div包装在另一个div中(如果您想保持块行为):

HTML格式:

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

CSS:

.yourdiv
{
    display: inline;
}

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

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

div {
    display: inline-flex;
}

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

您需要一个具有CSS所称的收缩以适应宽度的块元素,而规范并没有提供一种获得这种东西的好方法。在CSS2中,缩小尺寸并不是一个目标,而是指处理浏览器“必须”凭空获得宽度的情况。这些情况包括:

浮动绝对定位元件内联块元素表元素

当没有指定宽度时。我听说他们想在CSS3中添加你想要的内容。现在,就用上面的一个吧。

不直接曝光该功能的决定可能看起来很奇怪,但有充分的理由。它很贵。缩小到适合意味着至少设置两次格式:在知道元素的宽度之前,不能开始设置元素的格式,并且不能计算整个内容的宽度。此外,人们不需要像想象的那样经常收缩以适应元素。为什么你的桌子周围需要额外的div?也许你只需要表格标题。

您可以尝试fit内容(CSS3):

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

浏览器支持规格