如何强制包装器div根据其子元素保持最佳宽度

Question

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

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

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

谢谢!

http://jsfiddle.net/Xd9PV/1/

    <div class="wrapper">
        <div class="float float-1">apple</div>
        <div class="float float-2">banana</div>
        <div class="float float-3">orange</div>
        <div class="float float-4">some very delicious strawberries</div>
    </div>​

    .wrapper {
        border: 1px solid red;
        float: left;
        max-width: 300px;
    }

    .float {
        border: 1px solid blue;
        float: left;
    }

Answer 1

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

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

    clear:both;
}

这对我很有效。

Answer 2

使用CSS是不可能的。当你设置一个max-width时，它不会在x浮点数由于溢出而下降到其他行之后重新计算它的宽度。

您可以使用javascript/jQuery来计算这个值，它会在需要的地方插入一个分隔符，f.ex：

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;
    }
});​

演示：http://jsfiddle.net/2mfbY/

Answer 3

您可以尝试使用ellipsis (但我不确定您是否认为可以)

.float  {
    border: 1px solid blue;
    float: left; padding:0 2px;
    margin-right: 5px; max-width:90px; 
    text-overflow:ellipsis ; 
    white-space:nowrap; overflow:hidden
}
​