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

作者:袖梨 2022-06-25

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

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

 代码如下 复制代码








等分



flex等分



     
  • 手机

  •  
  • 联系人

  •  
  • 信息

  •  
  • 主屏



     
  • 手机

  •  
  • 联系人

  •  
  • 信息


table等分



     
  • 手机

  •  
  • 联系人

  •  
  • 信息

  •  
  • 主屏



     
  • 手机

  •  
  • 联系人

  •  
  • 信息


flex居中



 
子元素水平垂直居中


translate居中



 
子元素水平垂直居中


两端对齐



 

左边对齐


  右边对齐


相关文章

精彩推荐