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

Question

我在Chrome中遇到了问题（可能在其他浏览器中也有）。我有一个左浮动的包装div，其中包含一些子div，这些div也向左浮动，并且根据其内容具有不同的宽度。我为包装div定义了max-width属性，如您在fiddle代码中所见，当包装到达此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;
    }

- ruff

Answer 1

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

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

- David Hellsing

---

好的想法，包含一个100kb的库。 - user1189402

@AlexFl 你听说过gzip吗？ - David Hellsing

@ruff 这并不能解决问题，它只是在最后一个元素之前添加了一个换行符，而不考虑度量。尝试添加另一个浮动元素，看看会发生什么：http://jsfiddle.net/WtPNy/ - David Hellsing

@David，我理解你的意思，没错。但是Alih的解决方案对我来说仍然足够好。 - ruff

@ruff 好的，那就没问题了。但是你的问题不在于最大宽度，而是你想使用 CSS 将最后一个元素放在另一行，并尝试使用最大宽度来解决它。所以问题并不是很清楚。 - David Hellsing

Answer 2

你可以尝试使用省略号（但我不确定它是否适合你的需求）。

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

演示

- Sowmya

Answer 3

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

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

    clear:both;
}

对我而言可行。

- Alih Nehpets