真的不可能让 div 的大小适合其内容吗？

Posted 2023-03-06

【中文标题】真的不可能让 div 的大小适合其内容吗？

【英文标题】：Is it really impossible to make a div fit its size to its content?

【发布时间】：2011-08-19 16:11:19

【问题描述】：

我想澄清是否可以根据内容的大小使 div 适合其大小，而不必使元素浮动或必须使它们的位置绝对。有可能吗？

【问题讨论】：

想象一下，如果我们能做到这一点，Web 开发会变得多么简单！ 我想要display: block-inline!!（即外在表现为块，但在内部表现为内联——与inline-block相反）

【参考方案1】：

CSS display 设置

当然是possible - JSFiddle proof of concept 你在哪里 可以看到所有三种可能的解决方案：

display: inline-block - 这是你不知道的

position: absolute

float: left/right

【讨论】：

谢谢！我没有考虑过内联块！

精彩的回答，谢谢！我的情况：使用display: inline-block; 和检查/删除任何其他具有width 或height 属性影响所述属性的样式。

【参考方案2】：

您可以使用display: inline-block。

【讨论】：

我已经更新了我的概念证明 JSFiddle，它也显示了position:absolute 的可能性。这也是可能的。点击我的答案中的链接。

【参考方案3】：

你可以使用：

width: -webkit-fit-content;
height: -webkit-fit-content;
width: -moz-fit-content;
height: -moz-fit-content;

编辑：不。见http://red-team-design.com/horizontal-centering-using-css-fit-content-value/

另外： http://dev.w3.org/csswg/css-box-3/

【讨论】：

这是一个巨魔答案吗？ fit-content 不是宽度或高度的有效属性值。

它可以工作，但您必须根据您使用的浏览器将值设置为-webkit-fit-content 或-moz-fit-content。

好的。我不知道。

截至 2021 年，桌面浏览器在没有 webkit 或 moz 前缀的情况下支持此功能，但显然移动浏览器仍需要前缀。见caniuse.com/?search=fit-content

【参考方案4】：

你也可以使用

分词：打破一切；

当似乎没有任何工作时，这总是有效的；）

【参考方案5】：

它在 Edge 和 Chrome 上运行良好：

  width: fit-content;
  height: fit-content;