javascript - 如何根据其子项强制包装 div 保持其最佳宽度

Question

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

我喜欢它，因为在我的真实代码中，包装器具有“性感”的 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

使用 CSS 是不可能的。当您设置最大宽度时，它不会在 x float 由于溢出而下降到其他行后重新计算它的宽度。

您可以使用 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/