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>

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的其余部分保持不变。结果： screenshot

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>

等...

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

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

希望这有帮助！

在图像库中的内部填充

3 个答案: