时间戳

首页 > 解决方案 > 如何为动态填充的内容添加边框，除了 CSS 中的外部边框？

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

问题描述

我正在尝试创建一个网格系统，其中内容将动态填充，因此创建时我不会知道元素的确切数量。到目前为止，我所拥有的是将每个元素添加到一个 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;
    }
}

标签： javascriptjqueryhtmlcsssass

解决方案

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

解决方案

.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

推荐阅读