题 如何使div不大于其内容?


我的布局类似于:

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

我想要的 div 只扩展到我的范围 table 变。


1693
2018-01-16 16:03


起源


效果被称为“收缩包装”,并且回答有几种方法可以做到这一点(浮点数,内联,最小/最大宽度)所有这些都有副作用可供选择 - annakata


答案:


解决方案是设置你的 div 至 display: inline-block


2040
2017-10-12 16:47



@ leif81你可以用一个 span 或者a div 要么 ul 或者其他任何东西,重要的部分是你希望最小宽度的容器具有CSS属性 display: inline-block - miahelf
如果有人想知道:那么可以通过在其父级上设置“text-align:center”并在其上设置“text-align:left”来使表格的父级居中(例如<body style =“text-align:center”> < span style =“text-align:left; display:inline-block;”> <table> ... </ table> </ span> </ body>) - bernstein
对于带有span的我来说,它不适用于chrome,但使用white-space:nowrap; - albanx
一旦你有,请注意 display: inline-block 财产设置 margin: 0 auto; 不会按预期工作。在这种情况下,如果父容器有 text-align: center; 那么 inline-block 元素将水平居中。 - Savas Vedova
inline-block 不适合我,但是 inline-flex DID。 - mareoraft


你想要一个块元素,它具有CSS调用的缩小宽度,而规范并没有提供一种有福的方式来获得这样的东西。在CSS2中,缩小到适合不是目标,而是意味着处理浏览器“必须”凭空捏造宽度的情况。那些情况是:

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

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

不直接公开该功能的决定可能看起来很奇怪,但有充分的理由。它是昂贵的。缩小到适合意味着格式化至少两次:在知道元素的宽度之前,不能开始格式化元素,并且无法计算整个内容的宽度。另外,人们可能不会像人们想象的那样经常使用缩小到合适的元素。为什么你的桌子周围需要额外的div?也许表格标题就是您所需要的。


308
2018-01-16 16:40



我会说 inline-block 正是为此而完美地解决了这个问题。 - miahelf
我认为他们正在添加css4,它会 content-box, max-content, min-content, available, fit-content, auto - Muhammad Umer
新的 fit-content 关键字(首次编写此答案时不存在,但仍然存在 不完全支持)允许您明确地将“缩小到适合”大小调整应用于元素,如果您足够幸运只针对具有支持的浏览器,则无需使用此处建议的任何黑客。尽管如此;这些仍然有用! - Mark Amery
float 做了我需要做的事! - nipunasudha


我觉得用

display: inline-block;

会工作,但我不确定浏览器的兼容性。


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

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

196
2018-01-16 16:41



要回答浏览器兼容性问题:这不适用于DIV元素上的IE7 / 8。您必须使用SPAN元素。 - Matt Brock
@feeela - 我总是把*放在缩放前面,例如 *display: inline; *zoom: 1;。我还没有针对这种特殊情况进行测试,但我总是发现,只有IE7或IE7中的IE8(或怪异的IE8!)才需要hasLayout hack。 - robocat
@robocat是的确有一个解决方法 inline-block 在IE 7中启用。 - feeela
@feela - 你的评论对我没有意义!我建议把*放在缩放前面。 *变焦:1; - robocat
请解释为什么你的内联块解决方案有效。 - HelloWorldNoMore


display: inline-block 为元素添加额外的余量。

我会推荐这个:

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

180
2018-05-12 23:39



+1 - 这是现代浏览器的最佳,最干净的解决方案,它也允许元素居中。带有条件的评论 position: absolute <IE8是必要的。 - uınbɐɥs
指定 display: inline-block 不添加任何边距。但CSS处理内联元素之间显示的空格。 - feeela
请解释为什么你的显示解决方案:表工作。 - HelloWorldNoMore
inline-block使元素无法在其父元素中定位(例如,如果有文本对齐:中心,则无法将其固定在左侧)显示:table is perfect :) - FlorianB
这是你要走的路 position: absolute - m4heshd


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

Foo Hack - 跨浏览器支持内联块样式(2007-11-19)


82
2017-08-25 19:36



任何有此问题的人都应该添加所有这些样式。 Firefox在不使用时增加了利润 -moz-inline-stack - Justin


对我有用的是:

display: table;

在里面 div。 (测试过 火狐 和 谷歌浏览器)。


74
2018-01-11 12:01



是的,特别是如果你需要以保证金为中心:auto。那种情况内联块不是解决方案。 - Zsolt Szatmari
另请注意,如果要在此元素中填充工作,则必须进行设置 border-collapse: separate; 样式。它在许多浏览器中都是默认的,但通常是css框架,比如bootstrap将其值重置为 collapse。 - djxak
在2009年制造的Windows Mobile 6.5手机上测试了MSIE 6:它优雅地降级为全宽度div(这在手机上不太可能是一个问题)。如果有人在桌面上使用的是小于8的Internet Explorer版本,他们会使用不支持的操作系统(IE6附带XP,IE7附带Vista);我将它们重定向到一个页面,告诉他们如果要在该机器上继续安全地使用Internet,则升级到GNU / Linux。 - Silas S. Brown


你可以试试 fit-content (CSS3):

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

61
2018-05-27 00:41



在IE中不支持 caniuse.com/#search=fit-content :( - Bartek Skwira
@BartlomiejSkwira在IE或Eclipse中工作的任何替代品?其他解决方案如内联块对我不起作用.. \ - DAVIDBALAS1
这太有道理了,当然缺乏支持。 - Sava B.


有两个更好的解决方案

  1. display: inline-block;

    要么

  2. display: table;

出于这两个 display:table; 更好。 

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


53
2018-05-10 20:16



你介意解释原因吗? display:table 更好? - Nathaniel Ford
对于显示:内联块,您必须使用负边距方法来修复额外间距。 - Shuvo Habib
@NathanielFord, display:table 将元素保留在块格式化上下文中,因此您可以像往常一样使用边距等控制其位置。 display:-inline-*另一方面,将元素放入内联格式化上下文,导致浏览器在其周围创建匿名块包装器,包含具有继承字体/行高设置的行框,并将块插入该行框(对齐)它默认垂直基线)。这涉及更多“魔力”,因此潜在的惊喜。 - Ilya Streltsyn


你的问题的答案在未来奠定了我的朋友......

即“内在”即将推出最新的CSS3更新

width: intrinsic;

不幸 IE 落后于它所以它还不支持它

更多关于它: CSS内在和外在大小模块级别3 和 我可以用吗?:内在和外在尺寸

现在你必须满意 <span> 要么 <div> 设置

display: inline-block;

41
2017-12-11 13:07



intrinsic 因为价值是非标准的。它实际上是 width: max-content。见 关于MDN页面 或已经链接的草案。 - maryisdead