javascript - 使用流体基线网格具有不同网格高度的网格布局

Question

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

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

请在http://vsrao.com.s3-website-us-east-1.amazonaws.com查看我的网站。你应该可以在那里访问 css 和 html。我太长了，无法将其粘贴到这篇文章中。如果这是不礼貌的行为，请告诉我。也让我知道是否有更好的最新流体网格框架。

Answer 1

您可以通过在列上通过第 n 个子选择器应用 clear: left 来解决这个问题。使用您的媒体查询，您应该能够模仿 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 列布局仅适用于较小的屏幕视图。