首页 文章

计算百分比网格布局单元格宽度

提问于
浏览 次
0

我正在尝试生成响应式网格布局，但我不是数学天才......不......真的......我不是 .

这就是我想要做的 .

  • 获取包含网格元素的元素的宽度 .

  • 所有网格元素都有一个20px的右边距和下边距

  • 取决于根元素宽度，单元格数量的变化 . 如果宽度大于1200px，让我们说5个单元格 .

  • every：nth（x）（行中的最后一个元素）将margin-right设置为0

  • 计算细胞的百分比宽度 .

如果最后一个elemet将保持边际权利的转换将起作用，但在这种情况下，保证金必须去 .

这就是我能用数学做的一切...... ^ - ^

var marginRight = 20, viewportWidth = 1200, numcells = 5;
var substract =  marginRight / ( viewportWidth / 100 );
width = 100 / numcells - substract;

如上所述 . 如果最后一个单元格保留边距，这将起作用 . 但他们没有，我不知道如何弄明白 . 愿一些stackoverflowmonks带来智慧吗？那将是非常好的 . 谢谢 .

javascript html css gridview

2 回答

  • 0

    这有效 . 是否有更优雅的解决方案？

    viewportWidth = 1200, numcells = 5, marginRight = 20;
one   = viewportWidth-(numcells-1)*marginRight;
two   = (one / gridNum);
three =  two / (  viewportWidth / 100  );
    回复于
  • 0
    @media only screen and (max-device-width:320px) { 
    ._flowed_ { margin-right: 0%;width:100%; }
}
@media only screen and (max-device-width:481px) { 
    ._flowed_ { margin-right: 0%;width:100%; }
}
@media only screen and (max-device-width:961px) { 
    ._flowed_ { margin-right: 2.7894%; width: 48.6053%; }
    ._flowed_:nth-child(2n){ margin-right:0; }
}
@media only screen and (max-device-width:1025px) { 
    ._flowed_ { margin-right: 1.99005%;width: 32.0066%; }
    ._flowed_:nth-child(3n){ margin-right:0; }
}
@media only screen and (min-device-width:799px) { 
    ._flowed_ { margin-right: 1.76523%;width: 23.6761%; }
    ._flowed_:nth-child(4n){ margin-right:0; }
}
.fluid-4 ._flowed_:nth-child(4n){margin-right:0;}
.fluid-3 ._flowed_:nth-child(3n){margin-right:0;}
.fluid-2 ._flowed_:nth-child(2n){ margin-right:0; }
.fluid-4 ._flowed_{margin-right: 1.76523%;width: 23.6761%;}
.fluid-3 ._flowed_{margin-right: 1.99005%;width: 32.0066%;}
.fluid-2 ._flowed_{margin-right: 2.7894%;width: 48.6053%;}
.fluid-1 ._flowed_{margin-right: 0%;width:100%;}

    还有一点Javascript来改变类 .

    回复于

相关问题