图像库中的内部填充

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>

所以 - 我的问题。正如你所看到的，padding 当前是 10px，它应该是。但不是在第四列！基本上，我希望图像是四列，中间有三个空白列。就像现在一样，每个 .thumb 都包含一个计算出的 90px 宽度和右侧 10px 填充的图像。但是，它们应该是 92.5 像素宽并且间隔均匀。

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

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

Answer 1

您还可以在 tumbs div 中添加一个包含所有 tumb 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>

Answer 2

好的，所以我能看到的最简单的解决方法是再使用 1 个 div 和一个微小的 CSS 调整。将div.thumbs 包裹在另一个 div 中，如下所示：

<div class="thumbs-wrapper">
    <div class="thumbs>
        <!-- same content here as before -->
    </div>
</div>

并将边框从div.thumbs 移到新包装器上：

.thumbs-wrapper {
    border: 1px solid blue;
    overflow: hidden;
    width: 390px; /* cuts off the pesky extra padding */
}

.thumbs {
    width: 400px;
}

CSS 的其余部分保持不变。结果：

Answer 3

使用深奥的伪类没有任何意义……你自己做吧！

首先，我只是直接为图像设置一个类...不需要在每个图像上都有一个容器。我也认为'margin'是比'padding'更明智的选择，所以我最终得到的HTML看起来像：

<div class="thumbs">
    <div class="thumb">
        <img class="inner first" src="" />
    </div>
    <div class="thumb">
        <img class="inner" src="" />
    </div>
    <div class="thumb">
        <img class="inner" src="" />
    </div>
    <div class="thumb">
        <img class="inner last" src="" />
    </div>
    <div class="thumb">
        <img class="inner first" src="" />
    </div>
    <div class="thumb">
        <img class="inner" src="" />
    </div>
    <div class="thumb">
        <img class="inner" src="" />
    </div>
    <div class="thumb">
        <img class="inner last" src="" />
    </div>
</div>

等等……

我假设您的数学是：（400 像素宽）-（3 x 10 像素边距）= 370 像素/4 列 = 每列 92.5 像素...但通常您不想使用半个像素，所以我将使用 每列 92 像素，边距后总宽度为 368 像素。那么，既然您正在为 first 和 last 设置自己的类 - 您的样式表应该如下所示：

    .thumbs {
        width: 398px; // 368px + 30px for margin
        border: 1px solid blue; // 1px for each side, results in a total width of 400px
        overflow: hidden;
    }
    .thumb {
        width : 92px;
        float : left;
    }
    .inner {
        width : 92px;
        margin : 0 10px 10px 10px;
    }
    .first {
        margin : 0 10px 10px 0!important; //important should make sure it overrides        .inner
    }
    .last {
        margin : 0 0 10px 10px!important; //important should make sure it overrides .inner
    }

现在，我还没有测试过这个，但我认为它应该可以工作......如果不出意外，希望我的策略是有见地的，以便您可以根据自己的需要进行调整。您可以应用手动分配和堆叠类的相同理论来确保顶部和底部行的顶部和底部分别有 10px。

希望这会有所帮助！