javascript - 使用 Fluid Baseline Grid 的不同网格高度的网格布局

Question

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

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

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

Answer 1

您可能可以通过在您的列上应用一个 clear: left via 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;
      }
}

注意:您需要添加一个新的媒体查询(最大宽度:767 像素)，以便 clear on 2 column layout 仅应用于较小的屏幕 View 。