3

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

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

3 回答 3

1

使用 CSS 是不可能的。当您设置最大宽度时，它不会在 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/

于 2012-12-14T10:06:51.543 回答
0

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

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

    clear:both;
}

为我工作。

于 2012-12-14T10:15:05.277 回答
0

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

演示

于 2012-12-14T10:02:43.617 回答