即使是排水沟和全宽网格的CSS网格项目

我正在处理包含网格布局的布局以展示一组优惠。这里的我想要什么来实现：即使是排水沟和全宽网格的CSS网格项目

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; }

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

我很想用纯CSS来实现这一点，但我正在认识到可能不会发生。我会尝试:nth-child(3n)，但缺乏IE支持对我来说是一个难题。

我没有办法使用服务器端处理器来做一些网格物品的数学计算。我认识到我可能只是想用javascript或jquery来做这个数学计算，但我想要了解是否有人有任何其他建议。

TLDR：帮助我获得连水槽和全宽网格。

谢谢大家！

来源

2013-02-01 Fillip Peyton

'http://www.thebrightlines.com/2010/01/04/alternative-for-nth-of-type-and-nth-child/'为IE的另一种选择 – ashley

谢谢@ashley！这让我更接近一点。我只需要弄清楚正确的组合。 –

直到我意识到它不会重复，并且只针对一个特定元素，它才朝着正确的方向发展。还是）感谢你的建议！ –

我不知道你的容器的宽度是什么，但是这可能会帮助：

.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-01 21:32:39 Nox

因为我找不到任何CSS解决方案，我已经恢复到每个第三项上的类别。感谢您的第n个孩子（3n）的建议！ –

你可以使用这个img.offer:nth-child(3n) { padding-right: 0; }将摆脱填充上每3张图片的右侧

来源

2013-02-01 21:31:05 ashley

即使是排水沟和全宽网格的CSS网格项目

回答

相关问题