我正在设计一个布局,其中包含一个类似网格的布局以展示一组优惠。这是我要实现的目标:
我的问题是我似乎无法在这个网格中获得均匀和冲洗的排水沟。这是我到目前为止所拥有的:
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; }
我在每个优惠元素 (img.offer
) 上使用 padding-right:20px;
。由于这些报价都是内联的,我似乎无法让每一行都与该主列的右侧齐平(用手与较大横幅的右侧对齐)。
我很想用纯 CSS 实现这一点,但我逐渐意识到这可能不会发生。我会尝试 :nth-child(3n)
,但缺乏 IE 支持对我来说是个大问题。
我无法使用服务器端处理器对网格项的数量进行一些计算。我知道我可能只想使用 javascript 或 jquery 来做这个数学运算,但我想联系看看是否有人有任何其他建议。
TLDR:帮助我获得均匀的间距和全宽网格。
谢谢大家!
最佳答案
我不知道你的容器的宽度是多少,但这可能会有所帮助:
.offer {
/* some stuff */
padding-right: 25px; /* You have to find a good value */
}
.offer:nth-child(3n) {
padding-right: 0;
}
如果您不想使用 nth-child()
,您也可以为每第 3 张图像 (.offer) 提供一个额外的类。
关于具有均匀间距和全宽网格的 CSS 网格元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14655312/