扩展DIV内容下推其他的div

Question

我想才达到类似上图：

Expanded div content -> picture

我拿到8个申报单（各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> 

我尝试用绝对的新闻块的内容，但随后位置它不是推的div谢胜利，行，我tryied相对所有位置使它，但随后它摧毁了所有浮动的“新闻块”divs的地位。有没有可能没有JQuery的呢？

或者让它成为新闻内容绝对位置的唯一方法，并且通过jquery margin-bottom添加到新闻块来推动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> 

即使扩展了其中一个news-block-content div，这也可以让你保持按钮内联。你只需要修改你的jQuery来选择正确的新闻块内容。

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