html - 网格 parent 下的全宽下拉菜单

Question

在网格元素下设置全宽下拉菜单的最佳方法是什么。我的网格为每个元素设置了 25% 的宽度，并且元素是 float 的。单击它们时，子项(描述)将在其父项的行下方展开，并且需要将其他网格项向下推。我很难做到这一点。我的网格设置如下:

<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 内设置一个全宽的子项，但我怎样才能让它向下推网格的其余部分而不破坏网格？

这是一个 fiddle ... https://jsfiddle.net/2j0xscjd/

Answer 1

将此添加到您的 CSS 代码中

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