我的布局类似于:

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

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


当前回答

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

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

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

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

其他回答

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

div {

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

}

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

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

HTML代码:

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

CSS代码:

div {
    display: inline;
}

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

可以对父元素使用display:flex

#parentElement {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }

如果我们定义一个全局变量并将其用于这两个变量会怎么样。

:根目录{--表格宽度:400px;}.容器{width:var(--表格宽度);边框:1px实心黑色;//易于可视化}.内表{width:var(--表格宽度);边框:1px纯红色;//易于可视化}<div class=“container”><table class=“inner table”><tr><td>美国广播公司</td></tr></table></div>

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

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