我的布局类似于：
<div>
<table>
</table>
</div>
我希望div扩展到我所能达到的最大范围table。
如何使div不大于其内容？
You can try this code. Follow the code in the CSS section.
div {
display: inline-block;
padding: 2vw;
background-color: green;
}
table {
width: 70vw;
background-color: white;
}<div>
<table border="colapsed">
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
</table>
</div>div{
width:auto;
height:auto;
}
我们可以对div元素使用两种方式中的任何一种：
display: table;
要么，
display: inline-block;
我更喜欢使用display: table;，因为它可以自行处理所有多余的空间。同时display: inline-block需要一些额外的空间修复。
篡改Firebug时，我发现了属性值-moz-fit-content，该属性值完全符合OP的要求，可以按以下方式使用：
width: -moz-fit-content;
尽管它只能在Firefox上运行，但是找不到其他浏览器（例如Chrome）的等效项。
我display: inline-block通过在span标签内添加div标签，并将CSS格式从外部div标签移至新的内部span标签，解决了类似的问题（由于项目居中，因此我不想使用该标签）。如果display: inline block这不是您的合适答案，请将其扔掉作为另一个替代想法。
<div class="parentDiv" style="display:inline-block">
// HTML elements
</div>
这将使父div宽度与最大元素宽度相同。
尝试display: inline-block;。为了与跨浏览器兼容，请使用下面的CSS代码。
div {
display: inline-block;
display:-moz-inline-stack;
zoom:1;
*display:inline;
border-style: solid;
border-color: #0000ff;
}<div>
<table>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
</tr>
</table>
</div>我的CSS3 flexbox解决方案有两种形式：顶部的行为类似于跨度，而底部的行为类似于div，在包装器的帮助下占据所有宽度。它们的类分别是“ top”，“ bottom”和“ bottomwrapper”。
body {
font-family: sans-serif;
}
.top {
display: -webkit-inline-flex;
display: inline-flex;
}
.top, .bottom {
background-color: #3F3;
border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
display: -webkit-flex;
display: flex;
}
table {
border-collapse: collapse;
}
table, th, td {
width: 280px;
border: 1px solid #666;
}
th {
background-color: #282;
color: #FFF;
}
td {
color: #444;
}
th, td {
padding: 0 4px 0 4px;
}Is this
<div class="top">
<table>
<tr>
<th>OS</th>
<th>Version</th>
</tr>
<tr>
<td>OpenBSD</td>
<td>5.7</td>
</tr>
<tr>
<td>Windows</td>
<td>Please upgrade to 10!</td>
</tr>
</table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
<div class="bottom">
<table>
<tr>
<th>OS</th>
<th>Version</th>
</tr>
<tr>
<td>OpenBSD</td>
<td>5.7</td>
</tr>
<tr>
<td>Windows</td>
<td>Please upgrade to 10!</td>
</tr>
</table>
</div>
</div>
this is what you are looking for.工作演示在这里-
.floating-box {
display:-moz-inline-stack;
display: inline-block;
width: fit-content;
height: fit-content;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}<h2>The Way is using inline-block</h2>
Supporting elements are also added in CSS.
<div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
</div>您可以简单地通过使用display: inline;（或white-space: nowrap;）来做到这一点。
希望这个对你有帮助。
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div id="content_lalala">
this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
</div>
</td>
</tr>
</table>
我知道人们有时不喜欢表格，但是我得告诉你，我尝试了CSS内联黑客技术，他们在某些div中有点用，但在另一些div中却没有，因此，将扩展的div括在其中确实很容易一个表...并且...它可以具有或不具有inline属性，但该表仍将保留内容的总宽度。=）
只需将样式放入CSS文件
div {
width: fit-content;
}
好的，在很多情况下，您甚至不需要执行默认情况下div具有的功能height和widthauto的功能，但是如果不是您的情况，则应用inline-block显示将对您有用...看一下我为您创建的代码你在找什么：
div {
display: inline-block;
}<div>
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
<td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
</tr>
</table>
</div>不知道在什么情况下会出现这种情况，但是我相信CSS样式属性float会left或right将产生这种效果。另一方面，它也会有其他副作用，例如允许文本在其周围浮动。
如果我错了，请指正我，我不确定100％，并且目前无法自己测试。
您的问题的答案在于未来我的朋友...
即“ intrinsic”随CSS3最新更新一起发布
width: intrinsic;
不幸的是IE落后了，因此尚不支持
关于它的更多信息：CSS本质和外部大小调整模块级别3，可以使用吗？：内部和外部调整大小。
现在，您必须满意<span>或<div>设置为
display: inline-block;
CSS2兼容的解决方案是使用：
.my-div
{
min-width: 100px;
}
您还可以将div浮动，以使其尽可能小，但是如果div中的任何内容浮动，则需要使用clearfix：
.my-div
{
float: left;
}
width:1px;
white-space: nowrap;
对我来说很好:)
有两个更好的解决方案
display: inline-block;要么
display: table;
这两个中的display:table;一个更好，因为display: inline-block;增加了额外的余量。
因为display:inline-block;您可以使用负边距方法来修复多余的空间
对我有用的是：
display: table;
在div。（在Firefox和Google Chrome上测试）。
display: inline-block 为您的元素增加了余量。
我建议这样做：
#element {
display: table; /* IE8+ and all other modern browsers */
}
奖励：现在，您#element只需添加，就可以轻松地将新奇的居中显示margin: 0 auto。
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
您需要一个具有CSS所谓的“缩小至适合宽度”的块元素，而规范并未提供一种获得这种效果的简便方法。在CSS2中，缩小以适应不是目标，而是要处理浏览器“必须”凭空获得宽度的情况。这些情况是：
- 浮动
- 绝对定位的元素
- 内联块元素
- 表格元素
没有指定宽度时。我听说他们想在CSS3中添加您想要的东西。现在，请使用上述方法之一。
不直接公开显示功能的决定似乎很奇怪，但是有充分的理由。它是昂贵的。缩小以适应意味着至少要格式化两次：在知道元素的宽度之前，不能开始格式化元素，并且无法计算整个内容的宽度。另外，人们并不需要像人们想像中那样频繁地使用“缩小以适合”元素。为什么您的桌子周围需要额外的div？也许表格标题就是您所需要的。
您可以尝试fit-content（CSS3）：
div {
width: fit-content;
/* To adjust the height as well */
height: fit-content;
}
我认为使用
display: inline-block;
可以，但是我不确定浏览器的兼容性。
Another solution would be to wrap your div in another div (if you want to maintain the block behavior):
HTML:
<div>
<div class="yourdiv">
content
</div>
</div>
CSS:
.yourdiv
{
display: inline;
}
解决方法是将设置div为display: inline-block。
I tried
div.classname{display:table-cell;}and it worked!