javascript - 将列收缩到图像网格的宽度

Question

假设我有以下网站。

#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 像素宽。右栏将包含一堆图像。根据个人屏幕的宽度，右列每行可能适合 7 张图像，或者 10 张或更多。此外，每行的右侧几乎总是留有空间(因为屏幕的宽度不是 100 的倍数)。

我希望 right_column 收缩环绕图像，这样它的宽度就不会超出最右边图像的右边界。换句话说，我希望 right_column 的宽度等于每行可以容纳的所有图像宽度的总和。

Answer 1

使用 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 的情况下做到这一点，但这不是我擅长的事情。