css - 非语义列高度

Question

我使用“非语义”框架。当我创建一个 4 列的网格时，如果网格的所有元素的高度都不相同，则当我缩小窗口时网格会中断(从第三个 block 开始)。

请参阅此处 http://cemf.fr/lpem/paul-meyer/

有人知道如何解决这个问题吗？

HTML :

<article class="grid-50 tablet-grid-50 mobile-grid-100"> 
    /* MY CONTENT HERE */
</article>

Answer 1

是的，这是因为第一列的高度。

一种方法是为每一行创建grid-container。

<div class="grid-container">
    <article class="grid-50 tablet-grid-50 mobile-grid-100"> 
        /* MY CONTENT HERE */
    </article>
    <article class="grid-50 tablet-grid-50 mobile-grid-100"> 
        /* MY CONTENT HERE */
    </article>
</div>
<div class="grid-container">
    <article class="grid-50 tablet-grid-50 mobile-grid-100"> 
        /* MY CONTENT HERE */
    </article>
    <article class="grid-50 tablet-grid-50 mobile-grid-100"> 
        /* MY CONTENT HERE */
    </article>
</div>

其他方法是在第三列上使用 clear ..

添加一个类。

 .article-jury:nth-child(3n){
    clear:both; 
   }

并为第三列添加类

 <div class="grid-container">
    <article class="grid-50 tablet-grid-50 mobile-grid-100"> 
        /* MY CONTENT HERE */
    </article>
    <article class="grid-50 tablet-grid-50 mobile-grid-100"> 
        /* MY CONTENT HERE */
    </article>
    <article class="grid-50 tablet-grid-50 mobile-grid-100 clearColumns"> 
        /* MY CONTENT HERE */
    </article>
    <article class="grid-50 tablet-grid-50 mobile-grid-100"> 
        /* MY CONTENT HERE */
    </article>
</div>