如何使div不大于其内容？

我的布局类似于：

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

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

当前回答

可以对父元素使用display:flex

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

其他回答

在Firebug中我发现了属性值-moz fit content，它完全符合OP的要求，可以如下使用：

width: -moz-fit-content;

虽然它只在Firefox上运行，但我找不到其他浏览器（如Chrome）的等效版本。

对我有用的是：

display: table;

（在Firefox和Google Chrome上测试）。

可以对父元素使用display:flex

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

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

.div{
display:inline-block;
}

.div{
display:inline-flex;
}

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

<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

这将使父div宽度与最大元素宽度相同。

推荐文章