我得到了显示食谱网格的当前代码
<div class="mt-40">
<div class="recipe-cont cont mt-15 rounded left mr-15 mb-15">
<img src="data/2014121601/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5">
</div>
<div class="recipe-cont cont mt-15 rounded left mr-15 mb-15">
<img src="data/2014121602/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5">
</div>
<div class="recipe-cont cont mt-15 rounded left mr-15 mb-15">
<img src="data/2014121603/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5">
</div>
<div class="recipe-cont cont mt-15 rounded left mr-15 mb-15 ">
<img src="data/2014121601/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5">
</div>
<div class="recipe-cont cont mt-15 rounded left mr-15 mb-15 ">
<img src="data/2014121602/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5">
</div>
<div class="recipe-cont cont mt-15 rounded left mr-15 mb-15">
<img src="data/2014121603/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5">
</div>
<div class="recipe-cont cont mt-15 rounded left mr-15 mb-15">
<img src="data/2014121601/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5">
</div>
</div>
.
.recipe-cont {
width: 180px;
height: 210px;
}
输出如下所示:
我想要实现的是:
它不能正常工作的原因是因为我设置了margin-right: 15px。
我想通过插入一个新的 div 轻松地将新食谱添加到列表中,因此删除第 5 个 div 的边距将暂时解决问题,但是当我插入更多食谱时它会出现问题,因为它被推到一个新行。
mr-15 = margin-right: 15px
mb-15 = margin-bottom: 15px
帮助非常感谢!
最佳答案
您可以使用 :nth-child()
CSS3 选择器为每第 5 个元素指定一个样式。像这样:
.mt-40:nth-child(5n+0) {
margin-right: 0px;
}
这是一个文档:http://www.w3schools.com/cssref/sel_nth-child.asp
请务必将此声明放在您的 .mr-15 { margin-right: 15px }
之后,以便它层叠。
关于html - 将 div 排列为网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27495558/