0

フレームワーク「非セマンティック」を使用します。4 列のグリッドを作成するときに、グリッドのすべての要素の高さが同じでない場合、ウィンドウを縮小すると (3 番目のブロックから) グリッドが壊れます。

ここを参照してください http://cemf.fr/lpem/paul-meyer/

誰でもこれを修正する方法を知っていますか?

HTML :

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

1 に答える 1

2

あなたの最初の列の高さのために起こっています。

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、3番目の列で使用することです..

のようなクラスを追加します。

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

3列目のクラスを追加します

 <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>
于 2014-09-19T13:36:03.710 に答える