Question

基本上我想要div的列，当用户点击div时，他/她可以在div中看到更多，因为高度变大了。我设置了它，但看起来我有一个文档流问题。当我点击第一列中的div时，它下面的div会做一些有趣的事情。下面的一个像中途一样进入下一列。这不好我想让它在第一列中向下移动并且让其他更低的div跟随。这实际上发生在第二列。这很好，但问题是，当我点击第二列中的div时，第一列会产生相同的空间。第一列应该什么都不做。你会如何解决这个问题？

我想的一种方法是让两列浮动而不是每个div，我认为这将解决文档流问题。但这会破坏div的浮动左边的便利性，因为 div需要按顺序排列。

$(function(){
  $(".box").on("click", function(){
    if(!$(this).hasClass("open")){
      $(this).addClass("open");
      $(this).animate({
        height : "+=100"
      })
    }else{
      $(this).animate({
        height : "-=100"
      })
      $(this).removeClass("open")
    }
  })
})

html{
  font-size: 18;
}
.wrapper{
  width: 40em;
  height: 60em;
  background: #ccc;
}
.box{
  float: left;
  height: 8em;
  width: 18em;
  background: tomato;
  margin-bottom: 2em;
}
.box:nth-child(even){
  margin-left: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

以下是我想要的效果。它不是那么好，因为现在当我想动态地插入div的数据时我将不得不进行操作。假设1和2彼此相邻。它显示在屏幕上但在html中分开很远。这可能会在以后引起混淆。如果有人有更好的方式让我知道。

$(function(){
  $(".box").on("click", function(){
    if(!$(this).hasClass("open")){
      $(this).addClass("open")
      $(this).animate({
        height : "+=100"
      })
    }else{
      $(this).animate({
        height : "-=100"
      })
      $(this).removeClass("open")
    }

  })
})

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.wrapper{
  width: 40em;
  background: #ccc;
  height: 40em;
}
.col1{
  float: left;
  width: 19em;
}
.col2{
  float: right;
  width: 19em;
}
.box{
  background: tomato;
  height: 5em;
  margin-bottom: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper clearfix">
  <div class="col1">
    <div class="box">1</div>
    <div class="box">3</div>
    <div class="box">5</div>
  </div>
  <div class="col2">
    <div class="box">2</div>
    <div class="box">4</div>
    <div class="box">6</div>
  </div>
</div>

Answer 1

添加flex，删除float，古怪的错位已经消失。

$(function(){
  $(".box").on("click", function(){
    if(!$(this).hasClass("open")){
      $(this).addClass("open");
      $(this).animate({
        height : "+=100"
      })
    }else{
      $(this).animate({
        height : "-=100"
      })
      $(this).removeClass("open")
    }
  })
})

html{
  font-size: 18;
}
.wrapper{
  display: flex;
  flex-wrap: wrap;
  width: 40em;
  background: #ccc;
}
.box{
  height: 8em;
  width: 18em;
  background: tomato;
  margin-bottom: 2em;
}
.box:nth-child(even){
  margin-left: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

<强>更新

要使它们不能向下（逐行）并创建空白间隙，您可以使用列（请参阅下面的示例），或者您需要类似Masonry

的内容

$(function(){
  $(".box").on("click", function(){
    if(!$(this).hasClass("open")){
      $(this).addClass("open");
      $(this).animate({
        height : "+=100"
      })
    }else{
      $(this).animate({
        height : "-=100"
      })
      $(this).removeClass("open")
    }
  })
})

html{
  font-size: 18;
}
.wrapper{
  -webkit-columns: 18em 2; /* Chrome, Safari, Opera */
  -moz-columns: 18em 2; /* Firefox */
  columns: 18em 2;
  background: #ccc;
}
.box{
  display: inline-block;
  height: 8em;
  width: 18em;
  background: tomato;
  margin-bottom: 2em;
  order: 1;
}
.box:nth-child(odd) {
  order: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
  <div class="box">1</div>
  <div class="box">3</div>
  <div class="box">5</div>
  <div class="box">2</div>
  <div class="box">4</div>
  <div class="box">6</div>
</div>

设置div的高度并让下方的div向下移动

1 个答案: