javascript - float 下拉元素相互向右插入

Question

我正在从事一个元素，其中一页上有多个下拉菜单。为了按顺序获得这些下拉菜单，我使用 float left，问题是当我打开左侧的下拉菜单之一时，它会将其中一些推向右侧。需要做的是打开下拉菜单下方的下拉菜单需要向下移动，而不是向另一侧移动。

我曾尝试使用“clear: both”和“Overflow: auto”，但这些都不起作用。

这是一个 JSFiddle:https://jsfiddle.net/p85ga09f/

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

* {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

.accordion_holder {
  border-bottom: 1px dashed #eaeaea;
  width: 48%;
  float: left;
  margin: 0 1%;
}

.accordion {
  background-color: #fff;
  color: #444;
  cursor: pointer;
  padding: 18px;
  padding-bottom: 30px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.125rem;
  font-weight: 200;
  transition: 0.4s;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

li {
  line-height: 28px;
}

i {
  margin-right: 10px;
}

li,
a {
  color: #FF4212;
  text-decoration: none;
}

ul {
  margin: 0;
  margin-bottom: 5px;
}

<div class="content">
  <div class="accordion_holder">
    <button class="accordion">
      Placeholder 1
    </button>
    <div class="panel">
      <ul>
        <a href="#" target="_parent">
          <li>test</li>
        </a>
        <a href="#" target="_parent">
          <li>tset</li>
        </a>
      </ul>
    </div>
  </div>
  <div class="accordion_holder">
    <button class="accordion">
      Placeholder 2
    </button>
    <div class="panel">
      <ul>
        <li>
          test
        </li>
        <li>
          test
        </li>
        <li>
          test
        </li>
      </ul>
    </div>
  </div>
  <div class="accordion_holder">
    <button class="accordion">
      Placeholder 3
    </button>
    <div class="panel">
      <ul>
        <li>
          test
        </li>
        <li>
          test
        </li>
      </ul>
    </div>
  </div>
</div>

下拉菜单需要保留在它们的行和列上。

如有任何帮助，我们将不胜感激。

Answer 1

在每一行的左 Accordion 按钮上使用“清除:左”应该可以解决您的问题。 因此，在我的案例中使用“clear: left”向 Placeholder 3 添加一个类。

编辑:正如其他人所建议的；这是一个快速修复，如果您只有几个按钮，应该可以使用。对于较大的 Accordion ，我建议改用 Flexbox 或 Grid。