欢迎光临一流素材网,免积分免费素材下载!

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

所属栏目:DIV+CSS布局更新时间:2020-03-02 来源:网络 原作者:不详 发布:deepdfhy浏览:0

非常喜欢Layui前端框架,代码简洁好用,特别是删格化布局,非常灵活,Layui将容器进行了 12 等分,预设了 4*12 种 CSS 排列类。

可以实现一行2个,3个,4个,6个,但就是不能一行5个。


但其实只要熟悉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%}
}


收藏 0 有帮助 2 没帮助 0 打赏 0
给个评价吧