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

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

技能部分应该在博客文章5的左边，联系人应该在技能旁边。

请参阅我的网站http://vsrao.com.s3-website-us-east-1.amazonaws.com。你应该可以在那里访问css和html。我会太长时间粘贴在这篇文章中。如果这是不好的礼节，请让我知道。另外让我知道是否有更好的流体网格框架是最新的。

来源

2013-02-19 Venkat S. Rao

我认为你必须减少技能部分的高度。 – jjj 2013-02-19 20:32:42

显然我知道我可以做到这一点。但我希望有一个更优雅的解决方案。 – 2013-02-19 20:38:10

也许不是优雅，而是一个快速和功能的。 – jjj 2013-02-19 20:41:48

你可以通过在你的列上应用一个明确的：left通过一个n-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列布局只适用于您的较小屏幕视图。

来源

2013-02-19 21:18:44

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

回答

相关问题