网格下的全宽下拉菜单 parents

Question

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

<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;

我可以很容易地在每个 'quarter' div 中设置一个全宽的 child，但是我怎样才能让它把网格的其余部分向下推并且不破坏格子？

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

Answer 1

将此添加到您的 css 代码中

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

网格下的全宽下拉菜单 parents

Full Width dropdowns under grid parents

html

css

grid

css-position

css-float