如何为动态填充的内容添加边框，除了 CSS 中的外部边框？答案

【问题标题】：How to Add a Border to Dynamically Populated Content, Except for the external borders in CSS?如何为动态填充的内容添加边框，除了 CSS 中的外部边框？
【发布时间】：2018-09-19 01:49:32
【问题描述】：

我正在尝试创建一个动态填充内容的网格系统，因此我不会知道创建时元素的确切数量。到目前为止，我所拥有的是将每个元素添加到一个 flexbox 容器中，该容器在每行中包含 3 个元素。如果有超过 3 个元素，则下一个元素将转到下一行，依此类推。话虽如此，我想做的是在每个元素周围添加边框减去外部元素。所以它看起来像这样。

__|__|__
__|__|__
  |  |

我遇到的问题是我一直在为每个元素添加一个底部边框和一个右边框，然后使用 nth-child(3n) 为每个第三个子元素添加一个 0 边框。但这并不能解决底行底部边框的问题，对我来说它看起来像这样：

__|__|__
__|__|__
__|__|__

我不确定定位底部边框并将其删除的最佳方法，因为由于内容是动态填充的，因此我不知道该底部行上的确切元素数量，因为它可能是 1、2 ，或 3 个元素。那么获得我想要的结果的最佳方法是什么？是否可以单独使用 CSS 来做到这一点，或者我需要 javascript 来做到这一点？这是我目前使用的代码：

.flexContainer {
    display: flex;
    flex-wrap: wrap;
}

.flexElement {
        width: 33.33%;
        border-right: solid 2px #e1e1e1;
        border-bottom: solid 2px #e1e1e1;

        &:nth-child(3n), &:last-child {
         border-right: none;
    }
}

【问题讨论】：

标签： javascript jquery html css sass

【解决方案1】：

我建议将边框添加到顶部并排除前三个元素。

解决方案

.flexContainer {
  display: flex;
  flex-wrap: wrap;
}

.flexElement {
  width: 33.33%;
  border-right: solid 2px #e1e1e1;

  // Styles start on the 4th child
  &:nth-child(n+4) {
    border-top: solid 2px #e1e1e1;
  }

  &:nth-child(3n), &:last-child {
    border-right: none;
  }
}

见JSFiddle

【讨论】：