html - 是否可以将 CSS 中的特定样式设置为“中断”浮动 DIV？

Question

让我解释一下，我在父 div 中有几个浮点数，由于父级宽度限制，有可能会转到新行，是否可以在 CSS 中执行？

例如：设置所有 div 的样式，如 div3 和 div5 以及所有下一个可能中断的 div？（请注意，仅在我的示例中，宽度和高度并不是固定的）

http://jsfiddle.net/frntz/aMzF7/1/

谢谢你。

Answer 1

你不能只用 CSS 来做到这一点。您需要使用一些 JavaScript 来根据 div 的宽度计算容器的宽度。将被包装到下一行的 div 可以由超过包装器宽度的累积 div 宽度等确定。然后 JavaScript 可以轻松地重置宽度累积并应用类并继续子节点的迭代，直到所有 'wrapped ' div 被找到并设置样式。

这是一个使用 jQuery 的例子：

var maxWidth = $('#parent').width(),
    accWidth = 0;

$('#parent').children().each(function(){
    accWidth += $(this).width();
    if (accWidth > maxWidth) {
        $(this).addClass('newline');
        accWidth = $(this).width();
    }
});​

演示 1：http: //jsfiddle.net/AlienWebguy/77NTw/

演示 2：http: //jsfiddle.net/AlienWebguy/77NTw/1/

这是一个香草JS的例子：

var maxWidth = document.getElementById('parent').offsetWidth,
    accWidth = 0,
    nodes    = document.getElementById('parent').childNodes,
    i;

for (i in nodes) {
    if (nodes[i].hasOwnProperty('offsetWidth')) {
        accWidth += nodes[i].offsetWidth;
        if (accWidth > maxWidth) {
            nodes[i].className += ' newline';
            accWidth = nodes[i].offsetWidth;
        }   
    }
}

演示 3：http: //jsfiddle.net/AlienWebguy/77NTw/2/

Answer 2

是的。

如果父容器中没有空间，浮动将始终转到下一行。