图像库中的内部填充

Question

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

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

蓝色边框位于外部 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>

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

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

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

Answer 1

您还可以在 tumbs div 中添加一个包含所有 tumb div 的容器 div，并给该容器一个负边距以补偿拇指 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

使用深奥的伪类没有任何意义……只需创建自己的伪类即可！

首先，我只是直接为图像设置一个类...不需要每个图像上都有一个容器。我还认为“边距”是比“填充”更明智的选择，所以我最终得到的 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>

等等...

我假设你的数学是：(400px 宽) - (3 x 10px 边距) = 370 像素 / 4 列 = 每列 92.5 像素...但通常您不想使用半个像素，因此我将使用每列 92 像素 strong>，边距后总宽度为 368 像素。那么，既然您正在为第一个和最后一个设置自己的类，那么您的样式表应该类似于：

    .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。

希望这有帮助！