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

Question

我有一个 <DIV>我把一些元素放进去的地方。元素在自己的 <DIV> 中每个和它们应该显示在一行中，大小为 3。例如，我正在加载 12 个元素，那么应该是第一行的前 3 个元素，第二行的后 3 个元素，依此类推。 .

但是，我不使用表格或 Grid-System .我想在没有巨大 CSS 的情况下实现这一目标(更喜欢 JS)逻辑。因为，如果我这样做，我就可以将一些元素样式设置为 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%;
}