如何使div不大于其内容？

我的布局类似于：

<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

div{
  width:auto;
  height:auto;
}

尝试显示：inline block；。为了实现跨浏览器兼容，请使用以下css代码。

第二部分{显示：内联块；显示：-moz内联堆栈；缩放：1；*显示：内联；边框样式：实心；边框颜色：#0000ff；}＜div＞<表><tr><td>第1列</td><td>第2列</td><td>第3列</td></tr></table></div>

第二部分{宽度：配合内容；}＜div＞<表></table></div>

不知道这将出现在什么上下文中，但我相信CSS样式的属性float（向左或向右）将产生这种效果。另一方面，它也会有其他副作用，例如允许文本在其周围浮动。

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

推荐文章