如果CSS中存在3个以上的元素，如何在新行中自动格式化？

Question

我有一个<DIV>，我在里面放了一些元素。每个元素都在自己的<DIV>中，它们应该显示在一个大小为3的行中。例如，我加载了12个元素，然后应该是第一行中的前3个元素，第二行中的第二个3个元素，依此类推……

但是，我不使用table或Grid-System。我想在不使用庞大的JS逻辑的情况下实现这一点(更喜欢CSS)。因为，如果我这样做，我只需要将一些元素样式设置为display: none，它们就会消失，而另一些元素则会自动在正确的位置格式化。

我试着用display: inline，display: inline-box，float: left，float: right来实现这一点，但是所有的东西都毁了我的元素容器。以下是我的一些相关代码：

        .Pic-Table-Container{
            border: 3px solid black;
            border-radius: 5px;
            position: relative;
        }

        .Pic-nonPreview {
            width: 236px;
            height: 136px;
            padding-top: 20px;
        }

        .Pic-Preview {
            width: 350px;
            height: 200px;
            padding-top: 20px;
        }

        .Pic-Container {    
            width: 30%;
            height: 360px;
            border: 2px solid black;
            background: white;
            text-align:center;
        }

然后我的JS逻辑创建这样的元素：

tableNode.innerHTML += '<div class="'+type+'">
                           <div class="Pic-Container" id="Pic-Container-'+ID+'">

                            <img onmouseover="previewMode(\'' + ID + '\')" onmouseleave="nonpreviewMode(\'' + ID + '\')" src="https://www.NOT-RELEVANT.com' + ID + '" class="Pic-nonPreview" id="' + ID + '" />

                            <a class="hoverBoy" id="a-name-'+ID+'" OnClick="copyText(\'a-name-' + ID + '\');return false;">
                               ' + String(Name) + '
                            </a>

                            <a class="hoverBoy" id="a-id-'+ID+'" OnClick="copyText(\'a-id-' + ID + '\');">
                               ' + String(ID) + '
                            </a>

                         </div>
                      </div>';

因为我认为它仍然不是很清楚，这是我的计划的一张图片：

​

​

Answer 1

您应该使用flexbox。

.Main-Container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.Child-Elements{
  width: 33.3%;
}

Answer 2

.div-className:nth-child(3n+1){clear:left;}