我的布局类似于:

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

我希望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>

其他回答

我认为使用

display: inline-block;

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


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

HTML格式:

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

CSS:

.yourdiv
{
    display: inline;
}

您可以尝试此代码。按照CSS部分中的代码操作。

第二部分{显示:内联块;填充:2vw;背景色:绿色;}表{宽度:70vw;背景色:白色;}<div><table border=“colapsed”><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr></table></div>

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

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

我通过在div标记中添加span标记,并将CSS格式从外部div标记移动到新的内部span标记,解决了一个类似的问题(我不想使用display:inline块,因为项目居中)。如果display:inline块不是适合您的答案,那么就把它作为另一个备选方案。

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