是否有可能在CSS中将特定样式设置为'break'float DIV？

让我解释一下，我有几个浮动在一个父div中，可能有一些由于父宽度限制而转到新行，是否有可能在CSS中执行？是否有可能在CSS中将特定样式设置为'break'float DIV？

例如：风格所有div div3和div5和所有下一个div可能会休息？（请注意宽度和高度不只是在我的例子固定在现实）

谢谢。

2012-04-30 Frntz

你问你是否可以将特定的样式应用到换行到下一行的div上？ –

你的问题还不清楚。这是你想要做的吗？ http://jsfiddle.net/thirtydot/aMzF7/4/ – thirtydot

你不能只用CSS。您需要使用一些JavaScript来计算容器的宽度与div的宽度。将被包装到下一行的div可以由超过包装宽度的累积div宽度等来确定。然后，JavaScript可以轻松地重置宽度累积并应用该类，并继续子节点的迭代，直到所有包装'divs被发现和风格。

下面是用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/

来源

2012-04-30 14:32:57 AlienWebguy

谢谢你的回答:) – Frntz

是的。

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

来源

2012-04-30 14:32:55 daveyfaherty

是否有可能在CSS中将特定样式设置为'break'float DIV？

回答

相关问题