0

説明させてください。親 div にいくつかのフロートがあります。親の幅の制限により、一部が新しい行に移動する可能性があります。CSS でそれを行うことは可能ですか?

例: div3 と div5 のようなすべての div と、壊れている可能性のある次のすべての div のスタイルを設定します。（私の例では、幅と高さが実際には固定されていないことに注意してください）

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

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

4

2 に答える 2

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/

于 2012-04-30T14:32:57.967 に答える
0

はい。

親コンテナーに余裕がない場合、フロートは常に次の行に進みます。

于 2012-04-30T14:32:55.117 に答える