是否有可能在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？

回答

相關問題