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

输出如下所示：

​

我想要实现的是：

​

它不能像我想的那样工作的原因是因为我设置了边距-右:15 it。

我想通过插入一个新的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;
}

这里有一个文档：nth-child.asp

一定要将这个声明放在.mr-15 { margin-right: 15px }之后，这样它就会级联。

Answer 2

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

• 箱形浆纱
• 对内嵌块元素之间的空间进行斗争

码

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

基于JSFiddle的演示

Answer 3

不要害怕使用表格，尽管对于网站的布局和设计，表格经常会被人皱眉。当您在content部分中有这样的表格数据时，您可以始终在HTML代码中插入一个表。

这样，在插入新菜谱时，只需插入一个新的<td>或表数据标记即可。我希望这对你正在努力实现的目标有所帮助。