具有均匀排水沟和全宽网格的CSS网格项目

时间:2013-02-01 21:27:08

标签: css grid margins

我正在制作一个布局,其中包含一个类似网格的布局,以展示一系列优惠。这就是我想要实现的目标:

Objective

我的问题是,我似乎无法在这个网格中获得均匀和冲洗的排水沟。这是我到目前为止所做的:

Current Result

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:帮我找到排水沟和全宽网格。

谢谢大家!

2 个答案:

答案 0 :(得分:1)

我不知道容器的宽度是多少,但这可能有所帮助:

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

如果您不想使用nth-child(),您也可以为每个第3张图片(.offer)增加一个额外的课程。

答案 1 :(得分:0)

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