需要 div 被下推答案

【问题标题】：Need divs to be push down需要 div 被下推
【发布时间】：2019-01-17 02:46:47
【问题描述】：

插入新 div 时需要下推 div。我在codepen 中有这段代码。

现在div是一个接一个的插入，但是我需要被推送。

$('.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>

【问题讨论】：

codepen 的链接已损坏。
codepen 链接给出 404 错误。
这里：codepen.io/dj-smoke-starboy/pen/REOgvj

标签： javascript jquery css

【解决方案1】：

我用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>

【讨论】：

@Elvis 你最好发布一个新问题，而不是在 cmets 中提问。很少有人会读 cmets，但问题更能吸引眼球。