Скрытый контент искажает столбец в многостолбцовой компоновке CSS - PullRequest
Новая
       34

Скрытый контент искажает столбец в многостолбцовой компоновке CSS

1 голос
/ 23 сентября 2019

Я пытаюсь получить сетку из 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>

1 Ответ

0 голосов
/ 23 сентября 2019

Вы можете установить абсолютную позицию для 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>
...