网格父级

Question

在网格元素下使用全宽下拉列表的最佳方法是什么。我的网格设置为每个项目宽度为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;

我很容易在每个'quarter'div中设置一个全宽度的子节点，但是如何让它按下网格的其余部分而不打破网格呢？

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

Answer 1

将此添加到您的css代码

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