可以对父元素使用display:flex

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

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

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

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

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

个人而言，我只是这样做：

HTML代码：

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

CSS代码：

div {
    display: inline;
}

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

我的CSS3 flexbox解决方案有两种风格：顶部的表现像span，底部的表现像div，在包装器的帮助下获取所有宽度。它们的类分别是“top”、“bottom”和“bottomwrapper”。

正文{字体系列：无衬线；}.顶部{显示：-webkit内联flex；显示：内联flex；}.顶部，.底部{背景色：#3F3；边框：2px实心#FA6；}/*底部包装器将占据其余宽度*/.底部包装{显示：-webkit flex；显示：柔性；}表{边界塌陷：塌陷；}表格，th，td{宽度：280px；边框：1px实心#666；}第{背景色：#282；颜色：#FFF；}标准差{颜色：#444；}第，天{填充：0 4px 0 4px；}这是吗<div class=“top”><表><tr>操作系统</th><th>版本</th></tr><tr><td>OpenBSD</td><td>5.7</td></tr><tr><td>Windows</td><td>请升级到10</标准差></tr></table></div>你在找什么？<br>或者可能是。。。<div class=“bottomwrapper”><div class=“bottom”><表><tr>操作系统</th><th>版本</th></tr><tr><td>OpenBSD</td><td>5.7</td></tr><tr><td>Windows</td><td>请升级到10</标准差></tr></table></div></div>这就是你要找的。

好的，在很多情况下，您甚至不需要做任何事情，因为默认情况下，div的高度和宽度都是自动的，但如果不是这样，应用内联块显示将对您有效。。。看看我为你创建的代码，它会做你想要做的事情：

第二部分{显示：内联块；}＜div＞<表><tr><td>Lorem ipsum dolor坐amet，consectetur adipiscing elit。Morbi ultrices feugiat massa sed laoreet。Maecenas et magna egestas，facilisis purus quis，前庭nibh</标准差><td>Nunc auctor aliquam est ac viverra公司。Sed enim nisi，feugiat Sed accumsan eu，convalis eget felis。Pellentesque consequat eu leo nec pharetra。直径为</td><td>Lorem ipsum dolor坐amet，consectetur adipiscing elit。Morbi ultrices feugiat massa sed laoreet。Maecenas et magna egestas，facilisis purus quis，前庭nibh</标准差></tr></table></div>

只需将样式放入CSS文件

div { 
    width: fit-content; 
}