비대칭 열 높이

Question

프레임 워크 "unsemantic"을 사용합니다. 4 열의 격자를 만들 때 격자의 모든 요소가 같은 높이가 아닌 경우 창을 축소하면 격자가 (세 번째 블록에서) 끊어집니다.

는 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>