CSS布局自适应等分比例例子

作者:袖梨 2022-06-25

CSS等比例划分,在CSS布局中是比较重要的,下面分享几种常用方法和探讨一下兼容性。

一:浮动布局+百分比

 代码如下 复制代码
emmet html代码:ul.float-ul>li*5>.con>h3{等分标题}+p{等分内容等分内容}
.float-ul{width: 100%; overflow: hidden; zoom: 1;}
.float-ul li{float: left; width: 20%;}

该样式兼容性较好,但是无法实现当里面的列增多时比例也随着变化,必须手动修改,当然你也可以使用一个js来调整了。

二:行内元素(inline-block)+百分比

参考之前写过的inline-block替换float的代码,使用该样式还可以实现布局居中等块级元素所具有的特性。

 代码如下 复制代码
.inline-ul{font-size: 0; *word-spacing: -1px;}
.inline-ul li{display: inline-block; *display: inline; *zoom: 1; font-size: 14px; vertical-align: top; word-spacing: normal; letter-spacing: normal; width: 20%;}
@media screen and (-webkit-min-device-pixel-ratio:0){
.inline-ul{letter-spacing: -5px;}
}

三:display:table + display:table-cell

我们知道表格可以根据内容进行划分,CSS也有一个样式是display:table来实现类似表格的布局,不过不支持IE8以下浏览器。

 代码如下 复制代码
.table-cell{display: table; width: 100%;}
.table-cell li{display: table-cell;}

四:使用css3 display:flex.

旧语法:

 代码如下 复制代码

.flex-ul{display: -webkit-box; display: box;}
.flex-ul li{-webkit-box-flex:1; box-flex:1;}
新语法:

.flex-ul{display:-webkit-flex; display: flex; width: 100%;}
.flex-ul li{-webkit-flex:1; flex:1;}

该方法只适用于高级浏览器,IE10以下的还是算了。具体介绍

五:使用栅格化系统

例如Bootstrap的栅格化系统

 代码如下 复制代码

 

   

    ...
 


.col-md-3 { float:left; }
@media (min-width: 992px) {
  .col-md-3 { width: 25%; }
  /* 父级容器的3/12 */
}

缺点和第一个的float一样,需要根据列数来跳出宽度调整。

例子

 代码如下 复制代码




 ul.float-ul>li*5>.con>h3{等分标题}+p{等分内容等分内容}
 

浮动+百分比


 

      

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •   

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •   

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •   

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •   

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •  

 

inline-block + 百分比


 

      

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •   

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •   

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •   

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •   

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •  

 

table+table-cell


 

      

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •   

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •   

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •   

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •   

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •  

 

flex


 

      

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •   

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •   

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •   

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •   

  •    

        

    等分标题


        

    等分内容等分内容


       

      

  •  

 

上中下三行布局,上下定高,中间栏自适应浏览器高度,且内容垂直居中

 代码如下 复制代码

上中下三行布局,上下定高,中间栏自适应浏览器高度,且内容垂直居中

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

总结:

如果需要兼容IE6-IE7的,如果列数固定可以使用第一种和第二种。如果列数不固定,可以加少量js支持。

如果是只考虑移动的,考虑第三种,兼容性比下面的flex支持的比较好。

如果单纯的不考虑低版本浏览器的,可以考虑使用第四种。

相关文章

精彩推荐