我的布局类似于:

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

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


当前回答

尝试使用width:max-content属性根据div的内容大小调整其宽度。

试试这个例子,

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width:500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  width: max-content;
  margin: auto;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>

</body>
</html>

其他回答

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

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

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

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

第二部分{宽度:配合内容;}<div><表></table></div>

    .outer{
          width:fit-content;   
          display: flex;
          align-items: center;
    }
    .outer .content{
         width: 100%;
    }
        
        
        
        
<div class=outer>
    <div class=content>
       Add your content here


    </div>
        
</div>

我只需要设置填充:-whateverYouWantpx;

width:1px;
white-space: nowrap;

对我来说很好:)