Question

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

这就是我想要做的。

获取包含网格元素的元素的宽度。
所有网格元素都有一个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带来智慧吗？那将是非常好的。感谢。

Answer 1

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

viewportWidth = 1200, numcells = 5, marginRight = 20;
one   = viewportWidth-(numcells-1)*marginRight;
two   = (one / gridNum);
three =  two / (  viewportWidth / 100  );

Answer 2

@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来改变类。

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

2 个答案: