網格父母下的全寬下拉菜單

在網格元素下全寬下拉菜單的最佳方法是什麼？我的網格是爲每個項目設置爲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

網格父母下的全寬下拉菜單

回答

相關問題