0

複数の子要素を含む親要素があります。

これらの子要素はフローティングであり、幅と高さが互いに異なる場合があります。要素がいくつあるのか、その次元が何なのか、事前にはわかりません。

視覚的には、それらを親コンテナー内の行として表示したいと考えています。ただし、それらはフローティングされており、幅/高さが変化しているため、関連する要素がクリアされていることを確認するにはどうすればよいですか?

jQuery を使用して各行の最後の要素を計算すると、必要な視覚的な行を取得するために、各要素の後にクリア div を挿入できます。

各行の最後の要素をどのように計算できますか?

問題と理想的な解決策の例として: jsFiddle

ただし<div class="clear"></div>、ソースマークアップにそれを挿入する余裕がないので、行の最後の div を計算して動的に挿入するにはどうすればよいですか?

Nb childElements に最小の高さを設定したくありません。

4

2 に答える 2

3

最善の解決策ではないかもしれませんが、あなたが持っているものには有効な解決策です。

childElements の幅が親要素の幅を超えていないことを確認するだけの jQuery を少しまとめました。

$(function(){

    var maxWidth = $('.parentElement').outerWidth();
    var rollingWidth = 0;

    $('.childElement').each(function(index, item){

        // updated to cache jQuery item.
        var $item = $(item);

        rollingWidth += $item.outerWidth();

        if( rollingWidth > maxWidth){
            $item.css('clear','left');
            rollingWidth = $item.outerWidth();
        }

    });

});

jsfiddleをチェックしてください

于 2013-07-16T13:27:31.150 に答える