0

次のサイトがあるとします。

#left_column {
width: 200px;
}

<div id="left_column">
/* some content */
</div>

<div id="right_column">
/* A bunch of 100px width photos that are being floated */
</div>

コードが示すように、サイトは左の列と右の列で構成されています。左の列は 200 ピクセル幅です。右側の列には、たくさんの画像が保持されます。人の画面の幅によっては、右の列に 1 行あたり 7 枚、または 10 枚、またはそれ以上の画像が収まる場合があります。さらに、ほとんどの場合、各行の右側にスペースが残ります (画面の幅が 100 の倍数ではないため)。

right_column が画像の周りをシュリンクラップして、幅が一番右の画像の右の境界線を超えないようにしたい。つまり、right_column の幅を、各行に収まる画像のすべての幅の合計に等しくしたいと考えています。

4

1 に答える 1

0

jQueryを使用して、私はこれを思いついた：http: //jsbin.com/ijedej/4/edit

$(document).ready( function() {
  var column_width = Math.floor(($("#body").innerWidth()-$("#left_column").width())/100)*100;
  $("#right_column").css("width", column_width);
});

したがって、これは使用可能なスペースの量を計算し（$("#body").innerWidth()）、左側の列の幅を減算し、それを100で除算し、整数を取得するためにフロアし、次に100を乗算して新しい幅を取得します。

おそらくjQueryがなくても実行できますが、それは私が得意なことではありません。

于 2012-09-06T10:14:07.853 に答える