隐藏的内容扭曲了css多列布局上的列答案

【问题标题】：Hidden content distorts column on css multicolumn layout隐藏的内容扭曲了css多列布局上的列
【发布时间】：2019-09-24 03:25:17
【问题描述】：

我正在尝试获得一个 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>

【问题讨论】：

标签： jquery html css css-multicolumn-layout

【解决方案1】：

您可以将绝对位置设置为点击后显示的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>

【讨论】：