如何使 div 不大于其内容?

我的布局类似于:

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

我希望div仅扩展到table宽度。

答案

解决方案是将div设置为display: inline-block

您需要一个具有 CSS 所谓的 “缩小至适合宽度” 的块元素,而规范并未提供一种获得这种效果的简便方法。在 CSS2 中,“缩小以适应” 不是目标,而是意味着处理浏览器 “必须” 凭空获得宽度的情况。这些情况是:

  • 浮动
  • 绝对定位的元素
  • 内联块元素
  • 表格元素

没有指定宽度时。我听说他们想在 CSS3 中添加您想要的东西。现在,请使用上述方法之一。

不直接公开功能的决定似乎很奇怪,但是有充分的理由。它是昂贵的。缩小至适合表示至少要格式化两次:在知道元素的宽度之前,不能开始格式化元素,并且无法计算整个内容的宽度。另外,人们并不需要像人们想像中那样频繁地使用 “缩小以适合” 元素。为什么您的桌子周围需要额外的 div?也许表格标题就是您所需要的。

我认为使用

display: inline-block;

可以,但是我不确定浏览器的兼容性。


另一个解决方案是将div包装在另一个div (如果要保持块的行为):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

display: inline-block为您的元素增加了额外的边距。

我建议这样做:

#element {
    display: table; /* IE8+ and all other modern browsers */
}

奖励:现在,您只需添加margin: 0 auto ,就可以轻松地将新的#element居中。

display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack –对嵌入式块样式的跨浏览器支持(2007-11-19)

对我有用的是:

display: table;

div 。 (在FirefoxGoogle Chrome上测试)。

您可以尝试fit-content (CSS3):

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}

有两个更好的解决方案

  1. display: inline-block;

    要么

  2. display: table;

在这两个display:table;更好,因为display: inline-block;增加了额外的利润。

用于display:inline-block;您可以使用负边距方法来修复多余的空间

不知道在什么情况下,这将出现,但我相信,CSS-style 属性float要么leftright都会有这样的效果。另一方面,它也会有其他副作用,例如允许文本在其周围浮动。

如果我错了,请指正我,我不确定 100%,目前无法自己测试。

您的问题的答案在于未来我的朋友...

即 “intrinsic” 随 CSS3 最新更新一起发布

width: intrinsic;

不幸的是IE落后了,所以它还不支持它

有关它的更多信息: CSS 本质和外部大小调整模块级别 3可以使用吗? :内部和外部调整大小

现在,您必须将<span><div>设置为

display: inline-block;