我正在尝试设计一个脚本，它将在浏览器上（宽度上）有许多缩略图。我希望它能齐平，两边没有空隙。缩略图的大小应该总是一样的，我猜唯一的方法就是改变每个图像之间的间距。但是有人能帮我吗？如果我的问题不清楚，请告诉我。
编辑：下面是一个例子：http://www.beautyineverything.com/
谢谢您！
最佳答案
像这样的？
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>sandbox</title>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
<script type='text/javascript' src='js/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
var MAX_IMAGE_WIDTH = 240;
$(function(){
$(window).resize(resizeImages).resize();
});
function resizeImages() {
var containerWidth = $('.imageContainer').innerWidth();
var numberOfImages = Math.ceil(containerWidth / MAX_IMAGE_WIDTH);
var imageWidth = Math.ceil(containerWidth / numberOfImages);
var imageWidthLast = containerWidth - (numberOfImages - 1) * imageWidth;
$('.imageContainer .image').css('width', imageWidth);
$('.imageContainer .image:nth-child(' + numberOfImages + 'n)').css('width', imageWidthLast);
$('.imageContainer .image').each(function(){
$(this).text($(this).innerWidth());
});
}
</script>
<style type='text/css'>
.imageContainer {
border:1px solid black;
overflow:hidden;
}
.image {
width:160px;
height:160px;
float:left;
}
</style>
</head>
<body>
<div class='imageContainer'>
<?php
for ( $n = 10; $n < 30; ++$n) {
$backgroundColor = '#' . sprintf('%02x%02x%02x', $n * 8, $n * 8, $n * 8);
echo "<div class='image' style='background-color:{$backgroundColor};'></div>";
}
?>
</div>
</body>
</html>
调整图像大小可以用一种更智能的方式来编写，这样它们就不会是
223+223+223+223+223+223+223+216。为此，每列的宽度应单独计算，以便列宽的变化最大值仅为1px。关于javascript - 在浏览器中完全具有图像缩略图的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6380980/