非语义列高度

问题描述

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

请看这里

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

Html：

 < article class =grid-50 tablet-grid-50 mobile-grid-100> 
 / *我的内容在这里* / 
< / article> 
  

解决方案

列。

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

 < div class =grid-container> 
< article class =grid-50 tablet-grid-50 mobile-grid-100> 
 / *我的内容在这里* / 
< / article> 
< article class =grid-50 tablet-grid-50 mobile-grid-100> 
 / *我的内容在这里* / 
< / article> 
< / div> 
< div class =grid-container> 
< article class =grid-50 tablet-grid-50 mobile-grid-100> 
 / *我的内容在这里* / 
< / article> 
< article class =grid-50 tablet-grid-50 mobile-grid-100> 
 / *我的内容在这里* / 
< / article> 
< / div> 
  

其他方法是使用清除第三列..

添加一个类。

  .article - 陪审团：第n孩子（3n）{
明确：两者; 
} 
  

并添加到第三列中

 < div class =grid-container> 
< article class =grid-50 tablet-grid-50 mobile-grid-100> 
 / *我的内容在这里* / 
< / article> 
< article class =grid-50 tablet-grid-50 mobile-grid-100> 
 / *我的内容在这里* / 
< / article> 
< article class =grid-50 tablet-grid-50 mobile-grid-100 clearColumns> 
 / *我的内容在这里* / 
< / article> 
< article class =grid-50 tablet-grid-50 mobile-grid-100> 
 / *我的内容在这里* / 
< / article> 
< / div> 
  

I use the framework "unsemantic".When I create a grid of 4 columns, if all elements of the grid haven't the same height, the grid breaks ( from the third block ) when I reduce the window.

See here http://cemf.fr/lpem/paul-meyer/

Anyone know how to fix this?

Html :

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

解决方案

ya it is happening because of the height of your first column.

One way is to create grid-container for every row.

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

Other way is to use clear on your third column ..

Add a class like.

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

and add in class for the third column

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

这篇关于非语义列高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！