javascript - 当周围的 div 消失时，div 就位

Question

我有一个 JavaScript，当您在输入框中键入内容时，它会通过 ID 查找输入中的字符串匹配项，如果在某个时候字符串不匹配，则该特定的 div 将设置为不显示.一切进展顺利，除了这里是我的标记示例:

<div id="veryOuterContainer">
<div id="rowOfDivs">
    <div class="pics" id="BusterPosey"><p>This is a first test of the search</p></div>
    <div class="pics" id="FrankGore"><p>This is a second test of the search</p></div>
    <div class="pics" id="BrandonBelt"><p>This is a third test of the search</p></div>
    <div class="pics" id="DraymondGreen"><p>This is a fourth test of the search</p></div>
    <div class="pics" id="NavarroBowman"><p>This is a fifth test of the search</p></div>
</div>
<div id="rowOfDivs">
    <div class="pics" id="BusterPosey"><p>This is a first test of the search</p></div>
    <div class="pics" id="FrankGore"><p>This is a second test of the search</p></div>
    <div class="pics" id="BrandonBelt"><p>This is a third test of the search</p></div>
    <div class="pics" id="DraymondGreen"><p>This is a fourth test of the search</p></div>
    <div class="pics" id="NavarroBowman"><p>This is a fifth test of the search</p></div>
</div>
</div>

我可以让 div 消失得很好，而且它们都保持美观和样式......但它们保持在开始时的同一条线上。例如，如果我有一个匹配“BusterPosey”的字符串，它看起来像这样:

This is a first test of the search
This is a first test of the search

但我希望它看起来像这样:

This is a first test of the search This is a first test of the search

而且我只是不知道如何让不同行中的各个 div 在同一行上对齐(然后在达到最大宽度时换行)。

我尝试了以下方法:

#veryOuterContainer {
    display:inline-block;
}

这什么也没做。
我也试过:

#veryOuterContainer {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

并且:

#veryOuterContainer {
    display: inline-flex;
}

这两个都在同一行上呈现每个匹配的单独 div，而我正在处理大约 150 个 div，所以你可以想象，它们挤在一起以至于无法辨认出它们中的任何一个。

Answer 1

它不显示在行中的原因是因为您需要让另一个底部父级成为 flex 的显示，因为它控制其子元素。示例如下:

#veryOuterContainer #rowOfDivs {
  display: flex;
}