0

私はサイトのグリッド システムをやっています。マークアップはこんな感じ

<div class="section">
    <div class="grid">

    </div>
    <div class="grid">

    </div>
    <div class="grid">

    </div>
    <div class="grid">

    </div>
</div>
<div class="section">
    <div class="grid">

    </div>
    <div class="grid">

    </div>
    <div class="grid">

    </div>
</div>

クラス グリッドの幅は 33.3333333333% です。

グリッドの合計が 100 または 100% に近づくたびに div を挿入したいと考えています。このようにして、マークアップは次のようになります

<div class="section">
    <div class="grid">

    </div>
    <div class="grid">

    </div>
    <div class="grid">

    </div>
        <div class="clear"></div> <!-- inserted div -->
    <div class="grid">

    </div>
</div>
<div class="section">
    <div class="grid">

    </div>
    <div class="grid">

    </div>
    <div class="grid">

    </div>
       <div class="clear"></div> <!-- inserted div -->
</div>

これは私がこれまでに持っているものです。私のラッパーは最大幅972pxです

var grid = $('.grid');
var wrapper = $('.wrapper').width();

$(grid).each(function () {
    var gridWidth = $(this).width();
    var percentage = (gridWidth / wrapper)*100;


    console.log(percentage);
});

誰でも私を助けることができますか？

編集: スクリーンショットを追加したので、問題を確認できます。4 番目の要素には、持つべきではない margin-left があります。これが私がクリアを追加したい理由です ここに画像の説明を入力

4

1 に答える 1

2

まず第一に、コードの不一致に注意してください。HTML では「section」クラスを使用し、jQuery では「.wrapper」を選択しています。

そして、次のようなことを試してください：

$('.section').each(function() {

    var rowPixels = 0;
    $(this).find('.grid').each(function () {

        var gridWidth = $(this).width();
        rowPixels += gridWidth;

        if (rowPixels >= $('.section').width()) {
            $(this).after('<div class="clear"></div>');
            rowPixels = 0;
        }

    });

});
于 2012-10-05T12:19:43.493 に答える