html5栅格化,Layui删格化布局5等份(⼀⾏5列)
⾮常喜欢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}
box sizing.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%}
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论