CSS布局自适应模块等分比例的例子

作者：袖梨 2022-06-25

CSS等比例划分，在CSS布局中是比较重要的，运行以下代码，查看事例。

除了事例中的几个方法，还有个兼容性较好的方法，就是使用百分比，但是增减内容的时候，容易错乱。

 代码如下 复制代码








等分



flex等分



     
  • 手机

    •  
  • 联系人

    •  
  • 信息

    •  
  • 主屏



     
  • 手机

    •  
  • 联系人

    •  
  • 信息


table等分



     
  • 手机

    •  
  • 联系人

    •  
  • 信息

    •  
  • 主屏



     
  • 手机

    •  
  • 联系人

    •  
  • 信息


flex居中



 
子元素水平垂直居中


translate居中



 
子元素水平垂直居中


两端对齐



 

左边对齐


  右边对齐


相关文章

精彩推荐