如何使div不大于其内容？

我的布局类似于：

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

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

当前回答

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

其他回答

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

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

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

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

您可以尝试fit内容（CSS3）：

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

浏览器支持规格

这似乎是一个13年前的问题。

.div{
display:inline-block;
}

.div{
display:inline-flex;
}

现在可以工作几天，没有任何兼容性问题。

display：inline块为元素添加额外的边距。

我建议这样做：

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

奖金：你现在只需添加margin:0auto，就可以轻松地将这个新奇的#元素居中。

不知道这将出现在什么上下文中，但我相信CSS样式的属性float（向左或向右）将产生这种效果。另一方面，它也会有其他副作用，例如允许文本在其周围浮动。

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

推荐文章