html - 图像库中的内部填充

Question

所以，我有这个画廊功能，它只在网格中显示图像。我目前正在使用 TABLE，但我想转到 CSS 以便在图像上使用 100% 的宽度，因此它可以很好地缩放。

是的，最好通过查看此页面来解释:http://sandman.net/test/css_gallery.php

蓝色边框位于外部 DIV 上，图像保存在 DIV 的层中。代码看起来像这样:

<div class="thumbs">
    <div class="thumb">
        <div class="inner">
            <img />
        </div>
    </div>
    <div class="thumb">
        <div class="inner">
            <img />
        </div>
    </div>
</div>

等等。样式表目前是这样的:

<style type='text/css'>
    .thumbs {
        width: 400px;
        border: 1px solid blue;
        overflow: hidden;
    }
    .thumb {
        width: 25%;
        float: left;
    }
    .thumb > .inner {
        padding: 0 10px 10px 0;
    }
</style>

所以 - 我的问题。如您所见，填充当前为 10px，这是应该的。但不是在第四列!基本上，我希望图像是四列，中间有三个空白列。就像现在一样，每个 .thumb 包含一个图像，计算宽度为 90px，右侧填充为 10px。但是，它们应该为 92.5 像素宽并且间距均匀。

因为 - 一个问题是我无法在前三列和第四列设置不同的边距，因为 100% 宽度的图像会改变大小，这是不可取的。所以填充必须以某种方式均匀地应用于所有图像。

那么，你有什么好的方法吗？ :)

Answer 1

您还可以在包含所有 tumb div 的 tumbs div 中添加一个容器 div，并为该容器提供负边距以补偿 thumb div 边缘的填充，这不是一个漂亮的解决方案，但它适用于所有浏览器，甚至那个与 nternet xplorer 押韵的。 :)

<div class="thumbs">
  <div class="container">
    <div class="thumb">
        <div class="inner">
            <img />
        </div>
    </div>
    <div class="thumb">
        <div class="inner">
            <img />
        </div>
    </div>
  </div> <!--container-->
</div>

<style type='text/css'>
    .container {
    margin: 0 -10px 0 -10px;
    }
</style>