我的布局类似于：
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
当前回答
修订版（如果您有多个孩子，则适用）：您可以使用jQuery（查看JSFiddle链接）
var d= $('div');
var w;
d.children().each(function(){
w = w + $(this).outerWidth();
d.css('width', w + 'px')
});
不要忘记包含jQuery。。。
在此处查看JSfiddle
其他回答
修订版（如果您有多个孩子，则适用）：您可以使用jQuery（查看JSFiddle链接）
var d= $('div');
var w;
d.children().each(function(){
w = w + $(this).outerWidth();
d.css('width', w + 'px')
});
不要忘记包含jQuery。。。
在此处查看JSfiddle
你的问题的答案在于未来，我的朋友。。。
即“内在”将随最新的CSS3更新而来
width: intrinsic;
不幸的是IE落后于它，所以它还不支持它
更多信息：CSS内部和外部尺寸模块级别3和我可以使用吗？：内在和外在尺寸。
现在，您必须满足＜span＞或＜div＞设置为
display: inline-block;
不知道这将出现在什么上下文中，但我相信CSS样式的属性float（向左或向右）将产生这种效果。另一方面，它也会有其他副作用，例如允许文本在其周围浮动。
如果我错了，请纠正我，我不是100%确定，目前无法自己测试。
CSS2兼容解决方案应使用：
.my-div
{
min-width: 100px;
}
您也可以浮动div，这将迫使它尽可能小，但如果div中有任何内容浮动，则需要使用clearfix：
.my-div
{
float: left;
}
尝试使用width:max-content属性根据div的内容大小调整其宽度。
试试这个例子，
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width:500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
width: max-content;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>
</body>
</html>
