Question

我想在这张照片上找到类似的东西：

我有8个div（每个25％）向左浮动（4个在一行）当我点击按钮然后div内容将向下扩展 - ＆gt;从第二行掠过所有的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的divs行，我试图将它全部置于相对位置，但随后它会破坏所有浮动的＆＃34; news-block＆＃34; divs位置。没有Jquery可以做到吗？

或者唯一的方法是将新闻内容设为绝对位置，并通过jquery margin-bottom添加到新闻块中以推动div的第二行？

Answer 1

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

$('.draggable').parents().off('mousemove');

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

希望这会有所帮助。如果您需要进一步的解释，请在下面注明。

扩大了div-content压低了其他div

1 个答案: