html - 是否可以将 CSS 中的特定样式设置为 'break' float DIV？

Question

让我解释一下，我在父级 div 中有几个 float ，由于父级宽度限制，有些 float 可能会换行，是否可以在 CSS 中实现？

例如:将所有 div 设置为 div3 和 div5 以及所有下一个可能中断的 div 的样式？ (请注意，仅在我的示例中，实际宽度和高度并未固定)

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

谢谢。

Answer 1

仅靠 CSS 是做不到的。您需要使用一些 JavaScript 来根据 div 的宽度计算容器的宽度。将被包裹到下一行的 div 可以通过累积的 div 宽度超过包装器宽度等来确定。然后 JavaScript 可以轻松地重置宽度累积并应用该类并继续子节点的迭代直到所有“包裹” ' 找到 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/