Javascript 浮动下拉元素相互向右推动

我正在做一个项目，一个页面上有多个下拉列表。为了得到这些下拉列表，我使用float left，问题是当我打开左侧的一个下拉列表时，它会将其中一些下拉列表推到右侧。需要做的是，打开下拉列表下面的下拉列表需要向下移动，而不是移动到另一侧

我尝试过使用“clear:both”和“Overflow:auto”，但都不起作用

下面是一个JSFIDLE：

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

*{
字体系列：“开放式Sans”、“Helvetica Neue”、Helvetica、Roboto、Arial、Sans serif；
}
.手风琴架{
边框底部：1px虚线#eaeaea；
宽度：48%；
浮动：左；
利润率：0.1%；
}
.手风琴{
背景色：#fff；
颜色：#444；
光标：指针；
填充：18px；
填充底部：30px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：1.125rem；
字号：200；
过渡：0.4s；
}
.小组{
填充：0 18px；
背景色：白色；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
李{
线高：28px；
}
我{
右边距：10px；
}
锂，
a{
颜色：#FF4212；
文字装饰：无；
}
保险商实验室{
保证金：0；
边缘底部：5px；
}

占位符1


占位符2


测试


测试


测试


占位符3


测试


测试

也许可以选择使用flexbox而不是float？您可以更好地控制相邻项的行为。我喜欢使用的一个指南是

您可以通过使用css网格实现这种方法，例如：

.content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
}

---

仅使用flexbox应该有效-添加

display: flex;
flex-wrap: wrap;

到“内容”容器，它应该以您想要的方式显示：

在每行的左侧手风琴按钮上使用“clear:left”（清除：左侧）可以解决您的问题。 因此，在我的例子中，向占位符3添加一个带有“clear:left”的类是有效的

---

编辑：正如其他人所建议的；这是一个快速修复，如果你只有几个按钮应该工作。对于较大的手风琴，我建议使用Flexbox或网格来代替。

如评论中所述。关键是要知道您是否正在处理动态列表，或者是否知道要渲染的元素数量

如果想使用更通用的方法，应该使用Flexbox。因此，您可以根据需要动态添加任意数量的元素，并且仍然保持相同的功能

但是，如果您希望快速（而且不干净）修复问题并保留当前的解决方案，您还可以指定要按下的元素。看

根据小提琴，您只需在正确的元素上设置

clear:left

，这实际上是第三个元素。为了更加灵活（感谢@04FS），您还可以使用如下类定义：

.accordion_holder:nth-child(2n+1) {
  clear: left;
}

---

我想你想表现得像这样。您可以使用flex box进行此操作。

---

感谢您的建议，问题是我希望其他下拉列表根据打开下拉列表的高度向下移动。@Satif如果您有答案，请将其作为答案而不是注释来写，并进行解释。这对Kjvhout和有同样问题的人都很有用。知道你是否在动态设置东西很重要。您可以在正确的元素上使用

clear

，这可以简单地解决问题（），也可以使用

flexbox

。谢谢，这似乎有效。请添加更详细的解释。保持代码示例简短。为便于阅读，应对回答问题不重要的样式规则进行删减。谢谢！flex box非常适合这个。如果您希望它们笔直地上下移动，则需要“flex-direction:column

            .content{
              display:flex;
              flex-wrap: wrap;
            }