需要divs下推

本文介绍了需要divs下推的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

插入新的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="cdnjs.cloudflare/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="code.jquery/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>