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消失得很好，他们保持良好和风格....但他们保持在他们开始的同一行。例如，如果我有一个字符串匹配＆＃34; BusterPosey＆＃34;，它将如下所示：

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，所以你可以想象，它们如此紧密地结合在一起，使它们无法辨认出任何一个。 / p>

Answer 1

它没有显示在行中的原因是因为你需要让另一个底部父项是flex的显示，因为它控制它的子元素。示例如下：

#veryOuterContainer #rowOfDivs {
  display: flex;
}

随着周围的div消失，div会出现

1 个答案: