使用流体基线网格的不同网格高度的网格布局

Question

我正在使用此模板：http://fluidbaselinegrid.com/创建流畅的网格来布局我的个人网站。并非我的所有网格都是高度，我有时会得到错误的位置。 [1]。

技能部分应位于博客文章5的左侧，联系人应位于技能旁边。

请在http://vsrao.com.s3-website-us-east-1.amazonaws.com查看我的网站。你应该能够访问那里的CSS和HTML。我太长了，不能把它贴在这篇文章中。如果这是礼仪不好，请告诉我。如果有更好的流体网格框架是最新的，请告诉我。

Answer 1

你可以通过在你的专栏上使用一个明确的：左边的nth-child选择器来解决这个问题。使用媒体查询，您应该能够模仿2或3列布局，如下所示：

// 2 column layout
@media only screen and (max-width: 767px) {
  .g1:nth-child(2n+1) {
    clear: left;
  }
}

// 3 column layout
@media only screen and (min-width: 768px) {
 .g1:nth-child(3n+1) {
        clear: left;
      }
}

注意：您需要添加新的媒体查询（最大宽度：767px），以便明确的2列布局仅应用于较小的屏幕视图。