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

【问题标题】：Is it really impossible to make a div fit its size to its content?真的不可能让 div 的大小适合其内容吗？
【发布时间】：2011-08-19 16:11:19
【问题描述】：

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

【问题讨论】：

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

【解决方案1】：

CSS `display` 设置

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

【讨论】：

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

【解决方案2】：

您可以使用display: inline-block。

【讨论】：

【解决方案3】：

你可以使用：

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

另外： 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;

【讨论】：