Question

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

例如：样式所有div如div3和div5以及所有下一个div可能会中断？（请注意宽度和高度在我的例子中没有固定）

谢谢。

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/

Answer 2

是

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

是否可以将CSS中的特定样式设置为“break”float DIV？

2 个答案: