如果 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

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

Answer 2

你应该使用 flexbox。

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

.Child-Elements{
  width: 33.3%;
}

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

How to format automatically in new line if more than 3 elements are present with CSS?

html

javascript

css

format

display