我的布局类似于:

<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

其他回答

CSS2兼容解决方案应使用:

.my-div
{
    min-width: 100px;
}

您也可以浮动div,这将迫使它尽可能小,但如果div中有任何内容浮动,则需要使用clearfix:

.my-div
{
    float: left;
}

您可以尝试此代码。按照CSS部分中的代码操作。

第二部分{显示:内联块;填充:2vw;背景色:绿色;}表{宽度:70vw;背景色:白色;}<div><table border=“colapsed”><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr></table></div>

我尝试了div.classname{display:table cell;},结果成功了!

div{
  width:auto;
  height:auto;
}

好的,在很多情况下,您甚至不需要做任何事情,因为默认情况下,div的高度和宽度都是自动的,但如果不是这样,应用内联块显示将对您有效。。。看看我为你创建的代码,它会做你想要做的事情:

第二部分{显示:内联块;}<div><表><tr><td>Lorem ipsum dolor坐amet,consectetur adipiscing elit。Morbi ultrices feugiat massa sed laoreet。Maecenas et magna egestas,facilisis purus quis,前庭nibh</标准差><td>Nunc auctor aliquam est ac viverra公司。Sed enim nisi,feugiat Sed accumsan eu,convalis eget felis。Pellentesque consequat eu leo nec pharetra。直径为</td><td>Lorem ipsum dolor坐amet,consectetur adipiscing elit。Morbi ultrices feugiat massa sed laoreet。Maecenas et magna egestas,facilisis purus quis,前庭nibh</标准差></tr></table></div>