Layui删格化合理布局5等份(一行5列)

2021-04-05 07:42 jianzhan
隶属频道:DIV+CSS合理布局升级 著作人:不祥 公布:deepdfhy访问:0次

十分喜爱Layui前端开发架构,编码简约功能强大,非常是删格化合理布局,十分灵便,Layui将器皿开展了 12 等分,预置了 4*12 种 CSS 排序类。

能够完成一行两个,3个,4个,6个,但便是不可以一行五个。


但实际上要是了解CSS的朋友都可以以自身改动。下边另附编码

5等分,12格,大约每列占有率是12/5=2.4,

能够取名

.layui-col-lg2-4
.layui-col-md2-4
.layui-col-sm2-4
.layui-col-xs2-4


详细CSS编码

/*删格化5等份*/
.layui-col-lg2-4,.layui-col-md2-4,.layui-col-sm2-4,.layui-col-xs2-4{position:relative;display:block;box-sizing:border-box}
.layui-col-xs2-4{float:left}
.layui-col-xs2-4{width:19.9999992%}
.layui-col-xs-offset2-4{margin-left:19.9999992%}
@media screen and (min-width:768px){
 .layui-col-sm2-4{float:left}
 .layui-col-sm2-4{width:19.9999992%}
 .layui-col-sm-offset2-4{margin-left:19.9999992%}
@media screen and (min-width:992px){
 .layui-col-md2-4{float:left}
 .layui-col-md2-4{width:19.9999992%}
 .layui-col-md-offset2-4{margin-left:19.9999992%}
@media screen and (min-width:1200px){
 .layui-col-lg2-4{float:left}
 .layui-col-lg2-4{width:19.9999992%}
 .layui-col-lg-offset2-4{margin-left:19.9999992%}
}