0

誰かがこれを達成するための良い方法をすでに見つけたのではないかと思っていました。

これが私が話していることを示すための画像です：

  • サイズは気にしないでください。ランダムに投げただけですが、話していることを示すために。
  • 1 番目の例では、小さな正方形の幅が 3 番目の例と同じであることに気付くでしょう。
  • 2番目の例では、正方形がデフォルトの幅に再び収まるサイズにウィンドウが達するまで、正方形の幅が減少し、他の正方形よりも2つの正方形が少なくなります。

ここに画像の説明を入力

まあ、簡単に手に入れられたと思います。いくつかのソリューションに出くわしましたが、シームレスに機能するものはありません。

前もって感謝します

4

1 に答える 1

1

JS

    var block_width = 50;
    var margin_right = 5;
    $(document).ready(function(){
        change_width();
    });

    function change_width(){
        var new_width = block_width + ($('#content').width() % (block_width + margin_right)) / Math.floor($('#content').width() / (block_width + margin_right));
        $('.item').width(new_width);
    }

CSS

#content{
    width:300px; /* set this to how wide you want the container to be */
}

.item{
    height:50px;
    display:inline-block;
    margin-right:5px; /* is the same as the value in the javascript */
}

HTML

<div id="content">
<div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
</div>

change_width()ボックスのサイズを再計算する必要があるときはいつでも関数を呼び出します。改行が書式設定を台無しにするため、これらすべての div が同じ行にあることを確認してください。

block_width各アイテムが収まるようにスケーリングされる前の、各アイテムの自然なブロック幅を指します。ブロックアイテムをmargin-right分離したい場合に使用します。

于 2013-08-22T06:37:11.050 に答える