CSSで特定のスタイルを 'break' float DIVに設定することはできますか？

Question

親のdivにいくつかの浮動小数点数がありますが、親の幅制限のために新しい行になる可能性があります。これはCSSで可能ですか？

たとえば、div3やdiv5のようなすべてのdivと、次のすべてのdivが壊れている可能性がありますか？ （幅と高さがちょうど私の例では本当で固定されていない何卒ご了承下さい）

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

ありがとうございました。

Answer 1

CSSだけではできません。 divの幅に対してコンテナの幅を計算するには、JavaScriptを使用する必要があります。次の行に折り返される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

はい。

親コンテナに空きがない場合は、常に次の行に移動します。