?4种实现多列布局css_html/css_WEB-ITnose

摘要：

　　多列布局在网站应用中也是经常见到的，今天就分享4中多列布局。

display:table

        .table {            width: auto;            min-width: 1000px;            margin: 0 auto;            padding: 0;            display:table;        }        .tableRow {            display: table-row;        }        .tableCell {            border: 1px solid red;            display: table-cell;            width: 33%;        }    
        
            
                one            
            
                two            
            
                three            
        
    

登录后复制 float

        .row {            float: left;            width: 33%;            border: 1px solid red;        }    
                one            
            
                two            
            
                three            

登录后复制 display: inline-block

        .row {            display: inline-block;            width: 32%;            border: 1px solid red;        }    
    one
    two
    three

登录后复制

column-count

        .column {            /* 设置列数 */            -moz-column-count:3; /* Firefox */            -webkit-column-count:3; /* Safari and Chrome */            column-count:3;                        /* 设置列之间的间距 */            -moz-column-gap:40px; /* Firefox */            -webkit-column-gap:40px; /* Safari and Chrome */            column-gap:40px;                        /* 设置列之间的规则 */            -moz-column-rule:4px outset #ff0000; /* Firefox */            -webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */            column-rule:4px outset #ff0000;        }    

登录后复制

小结：

　　以上代码都是在chrome上测试，如果使用请注意兼容性，有任何问题都可以提问

立即学习“前端免费学习笔记（深入）”；