Question

我使用框架＆＃34; unsemantic＆＃34;。当我创建一个包含4列的网格时，如果网格的所有元素都没有相同的高度，那么当我缩小窗口时，网格就会中断（从第三个块开始）。

任何人都知道如何解决这个问题？

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>

非语义列高度

1 个答案: