Html 如何使 div 不大于其内容？

How can I make a div not larger than its contents?

提问by user473598

I have a layout similar to:

我的布局类似于：

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

I would like for the divto only expand to as wide as my tablebecomes.

我希望div只扩展到与我一样宽的范围table。

回答by user473598

The solution is to set your divto display: inline-block.

解决方案是将您div的display: inline-block.

回答by buti-oxa

You want a block element that has what CSS calls shrink-to-fit width and the spec does not provide a blessed way to get such a thing. In CSS2, shrink-to-fit is not a goal, but means to deal with a situation where browser "has to" get a width out of thin air. Those situations are:

你想要一个块元素，它具有 CSS 所谓的缩小以适应宽度，而规范没有提供获得这种东西的幸运方式。在 CSS2 中，缩小以适应不是一个目标，而是意味着处理浏览器“必须”凭空获得宽度的情况。这些情况是：

• float
• absolutely positioned element
• inline-block element
• table element

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

when there are no width specified. I heard they think of adding what you want in CSS3. For now, make do with one of the above.

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

The decision not to expose the feature directly may seem strange, but there is a good reason. It is expensive. Shrink-to-fit means formatting at least twice: you cannot start formatting an element until you know its width, and you cannot calculate the width w/o going through entire content. Plus, one does not need shrink-to-fit element as often as one may think. Why do you need extra div around your table? Maybe table caption is all you need.

不直接公开该功能的决定可能看起来很奇怪，但有一个很好的理由。它是昂贵的。缩小以适应意味着至少格式化两次：在知道元素的宽度之前，您无法开始格式化该元素，并且无法在不遍历整个内容的情况下计算宽度。另外，人们不需要像人们想象的那样频繁地收缩以适应元素。为什么你的桌子周围需要额外的 div？也许表格标题就是你所需要的。

回答by mbillard

I think using

我认为使用

display: inline-block;

would work, however I'm not sure about the browser compatibility.

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

---

---

Another solution would be to wrap your divin another div(if you want to maintain the block behavior):

另一种解决方案是将您的包装div在另一个中div（如果您想保持块行为）：

HTML:

HTML：

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

CSS:

CSS：

.yourdiv
{
    display: inline;
}

回答by Salman von Abbas

display: inline-blockadds an extra margin to your element.

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

I would recommend this:

我会推荐这个：

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

Bonus:You can also now easily center that fancy new #elementjust by adding margin: 0 auto.

奖励：您现在还可以#element通过添加margin: 0 auto.

回答by Vitalii Fedorenko

You can try fit-content(CSS3):

你可以试试fit-content（CSS3）：

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

• Browser support
• Specification

• 浏览器支持
• 规格

回答by Sony Santos

What works for me is:

对我有用的是：

display: table;

in the div. (Tested on Firefoxand Google Chrome).

在div. （在Firefox和Google Chrome上测试）。

回答by nikib3ro

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

Foo Hack – Cross Browser Support for inline-block Styling (2007-11-19).

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

回答by Shuvo Habib

There are two better solutions

有两个更好的解决方案

1. display: inline-block;

   OR

2. display: table;

1. display: inline-block;

   或者

2. display: table;

Out of these two display:table;is better,because display: inline-block;adds an extra margin.

这两个display:table;更好，因为display: inline-block;增加了额外的余量。

For display:inline-block;you can use the negative margin method to fix the extra space

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

回答by falstro

Not knowing in what context this will appear, but I believe the CSS-style property floateither leftor rightwill have this effect. On the other hand, it'll have other side effects as well, such as allowing text to float around it.

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

Please correct me if I'm wrong though, I'm not 100% sure, and currently can't test it myself.

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

回答by trojan

The answer for your question lays in the future my friend ...

你的问题的答案在未来，我的朋友......

namely "intrinsic" is coming with the latest CSS3 update

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

width: intrinsic;

unfortunately IEis behind with it so it doesn't support it yet

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

More about it: CSS Intrinsic & Extrinsic Sizing Module Level 3and Can I Use?: Intrinsic & Extrinsic Sizing.

更多相关信息：CSS Intrinsic & Extrinsic Sizing Module Level 3and Can I Use? ：内在和外在尺寸。

For now you have to be satisfied with <span>or <div>set to

现在你必须满足<span>或<div>设置

display: inline-block;