响应式Web之流式网格系统
<div class="grid m-grid-1 d-grid-1"> </div> <div class="grid m-grid-1 d-grid-1"> </div> <div class="grid m-grid-1 d-grid-1"> </div> <div class="grid m-grid-1 d-grid-1"> </div> <div class="grid m-grid-1 d-grid-1"> </div> </div> </body> </html>
CSS代码如下:
CSS Code复制内容到剪贴板
.row{ width:100%; max-width:1024px; /*设置最大的宽度,一般为PC端才起作用*/ margin:0 auto; outline: 1px solid blue;
}
/*为row类清除浮动来防止由浮动元素造成的外边距折叠*/ .row:before,.row:after {content: " ";display: table;} .row:after {clear: both;}
/*设置每一列的格式*/ .grid{ height:20px; float:left; margin:1%; outline:1px solid red; }
/*设置每一个移动设备上m-grid-1类的宽度值,m-grid-2类为m-grid-1的两倍,以此类推*/ .m-grid-1{width:23%;} .m-grid-2{width:48%;} .m-grid-3{width:73%;} .m-grid-4{width:98%;}
/*为宽度大于或等于960px的设备设置列的宽度*/ @media (min-width:960px){ .d-grid-1{width:10.5%;} .d-grid-2{width:23%;} .d-grid-3{width:35.5%;} .d-grid-4{width:48%;} .d-grid-5{width:60.5%;} .d-grid-6{width:73%;} .d-grid-7{width:85.5%;} .d-grid-8{width:98%;} }
在PC 端显示结果如下: 在手机端显示如下: (编辑:西双版纳站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |