非语义列高度

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

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

HTML：

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

来源

2014-09-19 Kéryh

雅那是因为你的第一列的高度发生。

一种方法是为每一行创建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>

来源

2014-09-19 13:36:03 Sudheer

感谢。我使用Wordpress工作，因此内容是动态的，我如何在第三栏中指定清晰的内容？ – 2014-09-19 13:42:31

@Kéryh两种方式它会按照你想要的方式对齐你的网格。不同的列的长度（动态不应该是一个问题） – Sudheer 2014-09-19 13:46:12

对不起，我错过了。我只想要如何将一个类添加到第三个元素中......但我使用Jquery并且它工作正常！非常感谢。 '$（“。article-jury：nnth-child（3n）”）。addClass（“clearColumns”）' – 2014-09-19 13:57:44

非语义列高度

回答

相关问题