如何使div不大于其内容？

我的布局类似于：

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

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

当前回答

可以对父元素使用display:flex

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

2018-07-29 22:18:23

其他回答

只需使用display：inline；（或空白：nowrap；）。

我希望你觉得这很有用。

2014-10-05 09:36:06

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

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

2017-02-22 11:04:51

尝试使用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>

2020-08-31 09:30:01

只需将样式放入CSS文件

div { 
    width: fit-content; 
}

2018-04-21 16:11:32

对我有用的是：

display: table;

（在Firefox和Google Chrome上测试）。

2012-01-11 12:01:10

如何使div不大于其内容？

推荐文章

最新文章

标签