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

输出如下：

我想要达到的目的是：

它不能正常工作的原因是因为我设置了 margin-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 }之后放置此声明，以使其级联。

Answer 2

我不知道你是如何构建你的CSS的，但你应该将这两个链接视为解决方案的想法：

• Box Sizing

• Fighting the Space Between Inline Block Elements

<强>代码

* {
    margin:0;   
    padding:0;
    font-size: 0;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    display:inline;
}

Demo on JSFiddle

Answer 3

不要害怕使用表格，尽管表格经常不受网站布局和设计的影响。如果在内容部分中有表格数据，则可以始终在HTML代码中插入表格。

这样，当您插入新配方时，您只需插入新的<td>或表格数据标签即可。我希望这有助于你想要实现的目标。