网格父母下的全宽下拉菜单

在网格元素下全宽下拉菜单的最佳方法是什么？我的网格是为每个项目设置为25％的宽度和项目浮动。当它们被点击时，子项目（描述）将展开在其父项的行下方，并需要将其他栅格项目向下推送。我在做这件事情时遇到了麻烦。我的网格设置如下：网格父母下的全宽下拉菜单

<div class="wrapper" id="content"> 

    <div class="quarter"> 
     <div class="inner"> 
      <div class="wrap"> 
       <h5>Experiments</h5> 
      </div><!--end icon-wrap--> 
     </div><!--end inner--> 
    </div><!--end quarter--> 

    <!-- and then 30 more "quarter" instances 

</div> 

width:25%; 
float:left; 
padding:15px; 
box-sizing:border-box;

我很容易就能建立一个孩子是每个“季度” div中全宽，但我怎样才能得到它推栅格的其余下跌而不是打破电网？

这里有一个小提琴...... https://jsfiddle.net/2j0xscjd/

来源

2016-08-15 JordanBarber

添加到您的CSS代码

.quarter:nth-child(4n+1){clear: both;}

来源

2016-08-15 17:14:41

谢谢，但是这并不工作，我只需要在“说明”上点击显示...我可以通过点击增加'quarter'元素的高度来为全宽'描述'腾出空间，但其他行也会被压下。 – JordanBarber

比描述需要一个位置：绝对;所以它不会干扰盒子。和季度需求位置：相对;因此您可以将相关说明移动到您的框中。 –

然而，当我打开活动的“描述”时，如何将其他箱子推下去？ – JordanBarber

网格父母下的全宽下拉菜单

回答

相关问题