html - 将 div 排列为网格

Question

我得到了显示食谱网格的当前代码

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

输出如下所示:

我想要实现的是:

它不能正常工作的原因是因为我设置了ma​​rgin-right: 15px。
我想通过插入一个新的 div 轻松地将新食谱添加到列表中，因此删除第 5 个 div 的边距将暂时解决问题，但是当我插入更多食谱时它会出现问题，因为它被推到一个新行。

mr-15 = margin-right: 15px  
mb-15 = margin-bottom: 15px

帮助非常感谢!

Answer 1

您可以使用 :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 } 之后，以便它层叠。