Javascript 如何根据包装器div的子对象强制包装器div保持其最佳宽度

我在Chrome中遇到了一个问题（可能在其他浏览器中也有）。 我有一个浮动到左边的包装div。它包含一些子div，这些div也向左浮动，并且根据其内容具有不同的宽度。我为wrapper div定义了一个max-width属性，正如您在fiddle代码中看到的，当wrapper达到这个max-width时，wrapper中的最后一个子元素移动到下一行，但是wrapper保持了最大宽度，并且右边有很多空白。 我假设包装器的大小应该重新计算，并且应该具有较小的宽度，因为它是浮动的

我喜欢它，因为在我的真实代码中，包装器有“性感”的css，但在空白处看起来很粗鲁

对不起我的英语，我希望你能理解我的问题。有人知道我如何在没有任何JS（或只是一点点JS）的情况下解决这个问题吗

谢谢

苹果
香蕉
橙色
一些非常美味的草莓
​
.包装纸{
边框：1px纯红；
浮动：左；
最大宽度：300px；
}
.浮动{
边框：1px纯蓝色；
浮动：左；
}

您可以尝试使用

省略号（但我不确定您觉得是否合适）

使用CSS是不可能的。设置“最大宽度”时，由于溢出，在x个浮点数下降到其他行后，它不会重新计算其宽度

您可以使用javascript/jQuery来计算此值，而不是在需要时插入一个中断，例如：

var width = 0,
    maxWidth = 300, w;
$('.wrapper .float').each(function() {
    width += ( w = $(this).outerWidth() );
    if ( width > maxWidth ) {
        $(this).before('<div style="clear:left"></div>');
        width = w;
    }
});​

var宽度=0，
最大宽度=300，w；
$（'.wrapper.float'）。每个（函数（）{
宽度+=（w=$（this.outerWidth（））；
如果（宽度>最大宽度）{
$（本）。在（''）之前；
宽度=w；
}
});​

演示：
在最后一个div元素中添加一个clear:tware，如下所示：

.float {
    border: 1px solid blue;
    float: left;
    margin-right: 5px;
}
.float:last-child {

    clear:both;
}

适合我。
好主意，包括一个100kb的库。@AlexFl听说过gzip吗？“不可能使用CSS”：那不是真的。看看Alih Nehpets的答案。它解决了我的问题。@ruff这并不能解决它，它只是在最后一个元素之前添加了一个中断，不管度量值如何。尝试添加另一个浮点数，看看会发生什么：@David，我理解你的意思，没错。但Alih的解决方案对我来说仍然足够好。
var width = 0,
    maxWidth = 300, w;
$('.wrapper .float').each(function() {
    width += ( w = $(this).outerWidth() );
    if ( width > maxWidth ) {
        $(this).before('<div style="clear:left"></div>');
        width = w;
    }
});​

.float {
    border: 1px solid blue;
    float: left;
    margin-right: 5px;
}
.float:last-child {

    clear:both;
}