过滤和放置从左上角开始的元素的JavaScript代码

我是95%的方式做什么，我想有这个网页做。在这个问题上，我希望我的搜索栏过滤框中的选项，并向左上角填充它们。现在，这些盒子过滤正确并向上填充（不太清楚它们为什么向上过滤），但它们不会向上填充并向左填充。任何帮助都将不胜感激

注意：代码段是运行的，但是没有用于方框的容器，而as squarespace自然会生成这些方框

函数搜索_主题（）{
让输入=document.getElementById（'searchbar'）。值
input=input.toLowerCase（）；
设x=document.getElementsByClassName（'text'）；
设y=document.getElementsByClassName（'overlay-image_b1'）
对于（i=0；i

/*主容器*/
.叠加图像{
位置：相对位置；
宽度：100%；
}
/*原始图像*/
.覆盖图像.图像{
显示：块；
宽度：100%；
高度：自动；
}
/*原始文本覆盖*/
.覆盖图像.文本{
颜色：#fff；
字号：2.0em；
文本阴影：2px 2px 2px#000；
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：100%；
}
/*悬停格式上的文本*/
.overlay image.text_2{
颜色：#fff；
字体大小：0.75em；
线高：1.5em；
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：100%；
}
/*悬停上的新覆盖*/
。覆盖图像。悬停{
位置：绝对位置；
排名：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：0.5s缓解；
背景色：rgba（0,0,0,0.5）；
}
/*悬停时的新覆盖外观*/
.overlay图像：悬停。悬停{
不透明度：1；
}
.叠加图像。正常{
过渡：0.5s缓解；
}
。覆盖图像：悬停。正常{
不透明度：0；
}
#搜索栏{
左边距：15%；
填充：15px；
边界半径：10px；
宽度：70%；
}

---

您的项目会向上移动，因为上面的行中没有显示的内容，从而允许它们折叠。它们不会向左移动，因为那里仍然有表格单元格。您遇到的问题是，您正在使用一个表格来做表未设计用来做的工作。Css有一个工具来做您想要做的事情，称为flexbox。下面是例如：

香菜
茴香
薰衣草
茴香
生姜
圣人
肉桂色

导入“/styles.css”； const search=document.getElementById（“搜索”）； 如果（搜索）{ search.addEventListener（“更改”，事件=>{ if（event.target.value）{ //规范化搜索词。 const value=event.target.value.toLowerCase（）； console.log（值）； //隐藏所有不匹配的元素。 文件 .querySelectorAll（`options:not（[value*=${value}）`） .forEach（项目=>{ item.classList.add（“隐藏”）； }); //显示所有匹配的元素。 document.querySelectorAll（`options[value*=${value}]`）.forEach（item=>{ item.classList.remove（“隐藏”）； }); }否则{ //如果没有搜索词，则显示所有元素。 document.querySelectorAll（`options div`）.forEach（item=>{ item.classList.remove（“隐藏”）； }); } }); }

#选项{
/*将选项设置为适合一行中的三个项目，并将其换行*/
显示器：flex；
弯曲方向：行；
/*设置最大宽度而不是宽度将允许您的列表自动调整为更小的屏幕大小*/
最大宽度：70em；
柔性包装：包装；
}
#期权部{
/*将项目设置为固定宽度*/
宽度：20em；
边框：1px纯红；
边缘：0.5em；
文本对齐：居中；
}
#选项分区隐藏{
/*添加样式以在项目不应用于搜索时隐藏项目*/
显示：无；
}

嘿，谢谢你！我只是简单地将所有的块放入一个容器中，我将其定义为flex容器。然后，我在JavaScript中将

表格单元格更改为
内联flex
，它工作得非常好。尽管我没有使用此代码，但它为我指明了正确的方向！