Jquery 扩展的div内容向下推其他div

我想在那张照片上做点类似的事情：

我有8个div（每个25%）向左浮动（一行4个） 当我点击按钮时，div内容将向下展开->从secound行复制所有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>

我试着用新闻块内容的绝对位置，但它并没有推动第二条分割线，我试着使所有位置相对，但它破坏了所有浮动的“新闻块”分割位置。不使用Jquery是否可以做到这一点

---

或者，唯一的方法是使新闻内容处于绝对位置，并通过jquery margin bottom将其添加到新闻块中，以按下第二行div？

您可以使用四个按钮，然后扩展区域。像这样的

<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以选择正确的新闻块内容

---

希望这有帮助。如果您需要进一步的解释，请在下面发表评论。

如果我不需要使其响应（稍后一行上有3个div，而对于移动设备，一行上有一个div），这将起作用。对吗？我同意这种方法在移动设备上不太管用。经过一些思考后，我不确定如何使这个设计具有响应性。我建议找一个使用这个系统的网站，看看他们在做什么，或者让你的设计更简单，以支持多个设备。