需要divs下推 [英] Need divs to be push down

问题描述

插入新的div时，需要将div下推.我在 codepen 中有此代码.

Need divs to be pushed down when new div is inserted. I have this code in codepen.

现在，div依次插入，但随后需要推动.

Right now the divs are inserted one after another, but I need then to be pushed.

$('.dashdiv').each(function(i) {
  $(this).fadeOut(1).delay(1000 * i).fadeIn(1850);
});

.dashdiv {
  background: grey;
  margin: 5px;
  width: 200px;
  color: #fff;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dashdiv">1 - One</div>
<div class="dashdiv">2 - Two</div>
<div class="dashdiv">3 - Three</div>
<div class="dashdiv">4 - Four</div>
<div class="dashdiv">5 - Five</div>
<div class="dashdiv">Need push DOWN</div>

推荐答案

我是用display:flex和flex-direction:column-reverse

$('.dashdiv').each(function(i) {
  $(this).fadeOut(1).delay(1000*(i)).fadeIn(1850);
});

.dashdiv { background:grey; margin:5px; width:200px; color:#fff; padding: 10px;}

.flex {
  display:flex;
  flex-direction:column-reverse;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div class="flex">
  <div class="dashdiv">1 - One</div>
  <div class="dashdiv">2 - Two</div>
  <div class="dashdiv">3 - Three</div>
  <div class="dashdiv">4 - Four</div>
  <div class="dashdiv">5 - Five</div>
  <div class="dashdiv">Need push DOWN</div>
</div>

这篇关于需要divs下推的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！