扩展的 div-content 下推其他 div

Question

我想实现那张照片上的东西：

Expanded div content -> picture

我有 8 个 div（每个 25%）向左浮动（一行 4 个） 当我单击按钮时，div 内容会向下扩展 -> 从第二行推送所有 div。我怎么能做到？它必须是响应式的，所以以后一行有 3 个 div，最后一行只有 1 个 div。

结构是这样的：

<div class="news-block-wrap">
   <div class="news-block n1">
       <div class="news-block-content"></div>
   </div>
   <div class="news-block n2">
       <div class="news-block-content"></div>
   </div>
   <div class="news-block n3"></div>
   <div class="news-block n4"></div>
   <div class="news-block n5"></div>
   <div class="news-block n6"></div>
   <div class="news-block n7"></div>
   <div class="news-block n8"></div>
</div>

我尝试使用新闻块内容的绝对位置，但它没有推动 div 的第二行，我尝试使其所有位置相对，但随后它破坏了所有浮动的“新闻块”div 位置。没有 Jquery 是否可以做到这一点？

或者唯一的方法是让news-content绝对位置，并通过jquery margin-bottom添加到news-block以推送div的第二行？

Answer 1

您可以拥有四个按钮，然后是扩展区域。像这样。

<div class="news-block-wrap">
   <div class="news-block n1"></div>
   <div class="news-block n2"></div>
   <div class="news-block n3"></div>
   <div class="news-block n4"></div>

   <div class="news-block-content" id="n1-area"></div>
   <div class="news-block-content" id="n2-area"></div>
   <div class="news-block-content" id="n3-area"></div>
   <div class="news-block-content" id="n4-area"></div>

   <div class="news-block n5"></div>
   <div class="news-block n6"></div>
   <div class="news-block n7"></div>
   <div class="news-block n8"></div>
</div>

即使展开新闻块内容 div 之一，这也会使您的按钮保持内联。您只需要修改您的 jQuery 以选择正确的新闻块内容。

希望这会有所帮助。如果您需要下面的进一步解释评论。