javascript - 需要幻灯片div来在改变幻灯片时向下推元素

我有一个jquery幻灯片，里面有很多引号，长度是变化的。我正在尝试使用更长的引号来将页面的其余部分向下移动，以使其不会与下面的内容重叠。
HTML：

        <div id="page" class="hfeed">
           <div id="main">
                <div id="primary">
                 <div id="content" role="main">
                  <article id="post-2466" class="post-2466 page type-page status-
       publish hentry">
                   <div class="entry-content">
                   <div class="brad aside aside-1" >
                     <img class="alignnone size-full wp-image-12" title="image"
        src="/wp-content/uploads/2012/06/image.jpg" alt="" width="204" height="233" /></p>
                  <blockquote><p>Photo courtesy of Ron Pownall ©2003</p>
       </blockquote>
                 </div>
                 <div class="defaultText main"></div
                  <div id="quote" class="quotes aside aside-2">
                   <div id="quote1" class="quote"></div>
                   <div id="quote2" class="quote"></div>
                   <div id="quote3" class="quote"></div>
                   <div id="quote4" class="quote"></div>
                  </div><!--quote-->
<footer id="colophon" role="contentinfo">
        <div id="site-generator" class="col-sm-12 footer">
            <ul id="menu-bdf" class="menu bottom-menu col-sm-12 col-md-12">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</footer>

CSS：

body    {
    background-color:#144374!important;
    color:#FFFFFF!important; font-size:11pt!important; margin:0px; margin:0 auto; padding:0px 0px 0px 0px;
    font-family: inherit;
    position: relative;
  height: auto;
  min-height: 100% !important;
}
#primary .entry-content {
    display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
#primary .entry-content> * {
    flex: 1 100%;
}
/* Large screens */
  @media all and (min-width: 800px) {
    /* We invert order of first sidebar and main
     * And tell the main element to take twice as much width as the other two sidebars
     */
    .main { flex: 2 0px; }
    .brad {
        order: 1;
    max-width: 204px;
    }
    .main    {
        order: 2;
        max-width: 33%
    }
    .aside-2 {
        order: 3;
        max-width: 33%
    }
    .footer  { order: 4; }
  }
.quote  {
    padding:0px 10px 10px 10px;
    font-family:times new roman;
    line-height:2.6em;
    font-style: italic;
    font-size:10pt;
    color:#a7d2ff;
}
/*********** FOOTER ****************/
.footer {
    clear: both;
    overflow: hidden;
}
.created {
    margin: 0 auto;
    width: 70%;
}

当长引号显示时，它与页脚重叠。我需要使它向下压页脚，以便在主div上设置最小高度不会创建很多空白空间。任何帮助是极大的赞赏。

最佳答案

下面的代码正常工作，按钮在不同的引号之间循环，并且页脚自动向下移动以适应引号。 jQuery在引号中循环，并切换显示引号的类.active。

让我知道这是否不是您想要的。

$("#quote1").addClass("active");

$("button.next").click( function() {

  i = $(".quote.active").attr("quote-order");
  if ( i =="4" ) {
   i = "0"
   }
  $(".quote.active").removeClass("active");
  $(".quote[quote-order='" + String(parseInt(i) + 1 ) + "']").addClass("active");


});

body    {
    background-color:#144374!important;
    color:#FFFFFF!important; font-size:11pt!important; margin:0px; margin:0 auto; padding:0px 0px 0px 0px;
    font-family: inherit;
    position: relative;
  height: auto;
  min-height: 100% !important;
}
#primary .entry-content {
    display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
#primary .entry-content> * {
    flex: 1 100%;
}
/* Large screens */
  @media all and (min-width: 800px) {
    /* We invert order of first sidebar and main
     * And tell the main element to take twice as much width as the other two sidebars
     */
    .main { flex: 2 0px; }
    .brad {
        order: 1;
    max-width: 204px;
    }
    .main    {
        order: 2;
        max-width: 33%
    }
    .aside-2 {
        order: 3;
        max-width: 33%
    }
    .footer  { order: 4; }
  }
.quote  {
    padding:0px 10px 10px 10px;
    font-family:times new roman;
    line-height:2.6em;
    font-style: italic;
    font-size:10pt;
    color:#a7d2ff;
    display: none;
}
.quote.active {
  display: inherit;
}
/*********** FOOTER ****************/
.footer {
    clear: both;
    overflow: hidden;
}
.created {
    margin: 0 auto;
    width: 70%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page" class="hfeed">
<button class="next">Next Quote</button>
           <div id="main">
                <div id="primary">
                 <div id="content" role="main">
                  <article id="post-2466" class="post-2466 page type-page status-
       publish hentry">
                   <div class="entry-content">
                   <div class="brad aside aside-1" >
                     <img class="alignnone size-full wp-image-12" title="image"
        src="/wp-content/uploads/2012/06/image.jpg" alt="" width="204" height="233" /></p>
                  <blockquote><p>Photo courtesy of Ron Pownall ©2003</p>
       </blockquote>
                 </div>
                 <div class="defaultText main"></div
                  <div id="quote" class="quotes aside aside-2">
                   <div id="quote1" class="quote" quote-order="1">Hello</div>
                   <div id="quote2" class="quote" quote-order="2">Longer<br>Longer</div>
                   <div id="quote3" class="quote" quote-order="3">Longer<br>Longer<br>Even longer</div>
                   <div id="quote4" class="quote" quote-order="4">Longer<br>Longer<br>Even longer<br>Longest!</div>
                  </div><!--quote-->
<footer id="colophon" role="contentinfo">
        <div id="site-generator" class="col-sm-12 footer">
            <ul id="menu-bdf" class="menu bottom-menu col-sm-12 col-md-12">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</footer>

关于javascript - 需要幻灯片div来在改变幻灯片时向下推元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53685015/