Question

我在Chrome中遇到了问题（也许在其他浏览器中）。我有一个浮动到左边的包装div。它包含一些子div，这些div也向左浮动，根据它们的内容它们有不同的宽度。我为包装器div定义了一个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

使用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 2

您可以尝试使用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
}

<强> DEMO

Answer 3

添加一个清除：两者都是这样的最后一个div元素：

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

    clear:both;
}

适合我。

如何根据子节点强制包装div保持其最佳宽度

3 个答案: