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

Question

我有一个显示为卡片的数据列表视图，我正在尝试一个纯粹的CSS解决方案，其中我只有内部边框线。

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

下面是一个以卡片形式显示的三个数据项的示例，以及我试图通过内部网格线实现的目标。

笔记：

1. 如果只有两项，则底线不应可见
2. 我想我可以使用Lea Verou在这里提到的技术，但我一直没能让它发挥作用
3. 无论有多少项，都不应显示任何外部边界。尤其是最后一两个项目，这取决于项目总数

以下是单个列表项的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>

我知道要得到我可以使用的中间线：. col-md-6： nth-子（奇数）{边框-右： 1px纯灰色；}

问题在于底部边框，即如果您总共有三个数据项，则只有最后一个数据项的底部边框应设置为“无”。如果有四个，那么最后两个将需要将其底部边界设置为“无”。

在不使用表格的情况下，实现此功能的最佳方法是什么？

Answer 1

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

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

Answer 2

你可以把每两杯包装成一排。并将边框底部指定给该行，而不是列

见下文

.col-md-6:first-child { border-right:1px solid gray}
.row:not(:last-child) { border-bottom:1px solid gray}
.container-fluid { margin:15px auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container-fluid">


<div class="row">


<div class="col-md-6 col-xs-6 col-sm-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>
<div class="col-md-6 col-xs-6 col-sm-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>

</div>
<div class="row">


<div class="col-md-6 col-xs-6 col-sm-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>
<div class="col-md-6 col-xs-6 col-sm-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>

</div>
<div class="row">


<div class="col-md-6 col-xs-6 col-sm-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>


</div>
</div>

Answer 3

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

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

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

div {
  display: inline-block;
}

.container {
  border: solid 1px black;
}

.container div {
  width: 50px;
  height: 50px;
  margin: 5px;
  background-color: lightblue;
}

.container div:nth-last-child(n + 3) {
  border-bottom: solid 4px green;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>