jquery - CSS多列布局上的隐藏内容扭曲了列

我正在尝试获得3列网格，以使隐藏对象能够在同一列上显示和扩展，而内容不会移动到下一列或为其他列创建空白。到目前为止，这就是我所拥有的，但是当您单击按钮以显示隐藏的内容时，下面的内容将移至下一列。如何使其保持在同一列中？

$("#clickable").click(function(){
  $(".hidden_until_button_clicked").toggle();
});

#container {
  width: 100%;
  max-width: 700px;
  margin: 2em auto;
}
.flex-col {
  columns: 3;
  -webkit-columns: 3;
}
.box {
  height: auto;
  display: block;
  margin-bottom: 20px;
  page-break-inside: avoid;
  background-color: red;
}
.hidden_until_button_clicked{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div id="container" class="flex-col">
    <div class="box">Box 1</div>
    <div class="box">
      Box 2 <br />
      <button id="clickable">Click me</button>
      <div class="hidden_until_button_clicked">
        <p>This is all the extra content hidden until clicked</p>
      </div>

    </div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
    <div class="box">Box 7</div>
    <div class="box">Box 8</div>
  </div>

最佳答案

您可以将绝对位置设置为单击后显示的div：

$("#clickable").click(function(){
  $(".hidden_until_button_clicked").toggle();
});

#container {
  width: 100%;
  max-width: 700px;
  margin: 2em auto;
}
.flex-col {
  columns: 3;
  -webkit-columns: 3;
}
.box {
  height: auto;
  display: block;
  margin-bottom: 20px;
  page-break-inside: avoid;
  background-color: red;
}
.hidden_until_button_clicked{
  display: none;
  position: absolute;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div id="container" class="flex-col">
    <div class="box">Box 1</div>
    <div class="box">
      Box 2 <br />
      <button id="clickable">Click me</button>
      <div class="hidden_until_button_clicked">
        <p>This is all the extra content hidden until clicked</p>
      </div>

    </div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
    <div class="box">Box 7</div>
    <div class="box">Box 8</div>
  </div>

关于jquery - CSS多列布局上的隐藏内容扭曲了列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58067799/