修订版（如果您有多个孩子，则适用）：您可以使用jQuery（查看JSFiddle链接）

var d= $('div');
var w;


d.children().each(function(){
 w = w + $(this).outerWidth();
 d.css('width', w + 'px')
});

不要忘记包含jQuery。。。

在此处查看JSfiddle

我认为使用

display: inline-block;

但我不确定浏览器的兼容性。

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

HTML格式：

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

CSS:

.yourdiv
{
    display: inline;
}

这里有一个工作演示-

.浮动框{显示：-moz内联堆栈；显示：内联块；宽度：配合内容；高度：配合内容；宽度：150px；高度：75px；边距：10px；边框：3px实心#73AD21；}<h2>The Way正在使用内联块</h2>CSS中还添加了支持元素。＜div＞<div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div></div>

width:1px;
white-space: nowrap;

对我来说很好：）

您可以尝试fit内容（CSS3）：

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

浏览器支持规格

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