使用流體基線網格不同網格高度的網格佈局

我使用此模板：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

使用流體基線網格不同網格高度的網格佈局

回答

相關問題