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 也能做到，但这不是我擅长的。