如何使div不大于其内容？

我的布局类似于：

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

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

当前回答

我认为使用

display: inline-block;

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

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

HTML格式：

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

CSS:

.yourdiv
{
    display: inline;
}

其他回答

可以对父元素使用display:flex

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

仅仅

<div style="display: inline;">
    <table>
    </table>
</div>

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

div {

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

}

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

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

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

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

推荐文章