0

我正在开发一个布局，其中包含一个类似网格的布局，以展示一组优惠。这是我想要实现的目标：

客观的

我的问题是我似乎无法在这个网格中弄平和冲洗排水沟。这是我到目前为止所拥有的：

当前结果

HTML：

<div id="main">
    <div><img src="images/welcomeBanner.jpg"></div>
    <div class="offers">
        <img class="offer" src="images/offer1.jpg">
        <img class="offer" src="images/offer2.jpg">
        <img class="offer" src="images/offerX.jpg">
        <img class="offer" src="images/offerX.jpg">
        <img class="offer" src="images/offerX.jpg">
        <img class="offer" src="images/offerX.jpg">
    </div>
</div>

CSS：

div#content div#main div.offers img.offer{ padding-top:20px; padding-right: 20px; }

我正在使用padding-right:20px;这些优惠项目中的每一个 ( img.offer)。由于这些报价都是内联的，我似乎无法让每一行都与该主列的右侧齐平（用手与较大横幅的右侧对齐）。

我很想用纯 CSS 来实现这一点，但我意识到这可能不会发生。我会尝试:nth-child(3n)，但缺乏 IE 支持对我来说是一个交易破坏者。

我无法使用服务器端处理器对网格项的数量进行一些数学运算。我认识到我可能只想使用 javascript 或 jquery 来做这个数学运算，但我想联系看看是否有人有任何其他建议。

TLDR：帮助我获得均匀的排水沟和全宽网格。

谢谢大家！

4

2 回答 2

1

我不知道您的容器的宽度是多少，但这可能会有所帮助：

.offer {
    /* some stuff */
    padding-right: 25px; /* You have to find a good value */
}
.offer:nth-child(3n) {
    padding-right: 0;
}

如果您不想使用nth-child()，您也可以给每第三张图片（.offer）一个额外的类。

于 2013-02-01T21:32:39.753 回答
0

您可以使用img.offer:nth-child(3n) { padding-right: 0; }它来消除每 3 个 img 右侧的填充

于 2013-02-01T21:31:05.157 回答