Html 带有可变项的内部网格线的CSS选择器

我有一个显示为卡片的数据列表视图，我正试图得到一个纯CSS解决方案，在那里我只有内部边界线

卡片每行最多显示两张，当有更多卡片时，卡片将换行到下一行。我们使用引导程序col-md-6来实现这一点

下面是一个显示为卡片的三个数据项的示例，以及我试图通过内部网格线实现的功能

注:

如果只有两个项目，那么底线应该不可见

我想我可以使用上面提到的技术，但我一直没能让它发挥作用

无论有多少项，都不应显示任何外部边界。尤其是最后一两个项目，这取决于项目总数

以下是单个列表项的HTML标记示例：

<div class="col-md-6">
    <div class="form-group">
        <label class="control-label">Name</label>
        <div class="form-control-static">Fund</div>
    </div>

    <div class="form-group">
        <label class="control-label">Tax Rate</label>
        <div class="form-control-static">1</div>
    </div>

    <div class="form-group">
        <label class="control-label">Amount</label>
        <div class="form-control-static">10</div>
    </div>

    <div class="edit-buttons">
        <a class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span> edit</a>
        <a class="btn btn-link><span class="glyphicon glyphicon-remove"></span> delete</a>
    </div>
</div>

名称
基金
税率
1.
数量
10
编辑
你可以把每两杯包装成一排。并将
边框底部
指定给该行，而不是列

见下文


.col-md-6:第一个子项{右边框：1px实心灰色}
.row:not（：最后一个子项）{边框底部：1px实心灰色}
.container流体{margin:15px auto；}

名称
基金
税率
1.
数量
10
编辑
删除
名称
基金
税率
1.
数量
10
编辑
删除
名称
基金
税率
1.
数量
10
编辑
删除
名称
基金
税率
1.
数量
10
编辑
删除
名称
基金
税率
1.
数量
10
编辑
删除
您可以将每2列包装在一行中。并将
边框底部
指定给该行，而不是列

见下文


.col-md-6:第一个子项{右边框：1px实心灰色}
.row:not（：最后一个子项）{边框底部：1px实心灰色}
.container流体{margin:15px auto；}

名称
基金
税率
1.
数量
10
编辑
删除
名称
基金
税率
1.
数量
10
编辑
删除
名称
基金
税率
1.
数量
10
编辑
删除
名称
基金
税率
1.
数量
10
编辑
删除
名称
基金
税率
1.
数量
10
编辑
删除
在每张卡片中放置一个公共类。这里我假设它是
卡

.card:nth-child(odd){
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.card:nth-child(even){
  border-bottom: 1px solid #ddd;
}

在每张卡片上放一个普通类。这里我假设它是
卡

.card:nth-child(odd){
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.card:nth-child(even){
  border-bottom: 1px solid #ddd;
}

换句话说，最后一项应该始终具有边框：none。
最后一个项目之前，只有当它是奇怪的

我将跳过样式来制作网格，因为这并不真正相关

让我们开始将边界设置为除最后2个之外的所有边界：


div{
显示：内联块；
}
.集装箱{
边框：实心1px黑色；
}
.货柜组{
宽度：50px；
高度：50px；
保证金：5px；
背景颜色：浅蓝色；
}
.container div:n最后一个子项（n+3）{
边框底部：实心4px绿色；
}
换句话说，最后一项应始终具有边框：无。
最后一个项目之前，只有当它是奇怪的

我将跳过样式来制作网格，因为这并不真正相关

让我们开始将边界设置为除最后2个之外的所有边界：


div{
显示：内联块；
}
.集装箱{
边框：实心1px黑色；
}
.货柜组{
宽度：50px；
高度：50px；
保证金：5px；
背景颜色：浅蓝色；
}
.container div:n最后一个子项（n+3）{
边框底部：实心4px绿色；
}

这不起作用，因为用户可以随机删除项目，如果我按照此路线，这意味着我必须添加JS代码来移动项目，以便它们在列表中自然向上移动，即从左到右从上到下，这不起作用，因为用户可以随机删除项目，如果我按照此路线，这意味着我会必须添加JS代码来移动项目，以便它们在列表中自然向上移动，即从左到右从上到下