我正在使用以下模板:http://fluidbaselinegrid.com/创建流畅的网格以布局我的个人站点。并非我所有的网格都是高度,有时我会放错位置。
[1]。
“技能”部分应位于“博客文章5”下方的左侧,“联系方式”应位于技能旁边。
请访问http://vsrao.com.s3-website-us-east-1.amazonaws.com访问我的网站。并且您应该能够在那里访问css和html。我太长了,无法在这篇文章中粘贴它。请告诉我这是否是不良礼节。还请让我知道是否有最新的更好的流体网格框架。
最佳答案
您可以通过在列上通过nth-child选择器左移一个clear:来解决此问题。使用媒体查询,您应该能够模仿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列透明布局仅适用于较小的屏幕视图。
关于javascript - 使用流体基线网格具有不同网格高度的网格布局,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14966654/