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

缩小将列包裹到图像网格的宽度

1 个答案: