Skip to content

Layout 布局

约 403 字大约 1 分钟

2025-05-23

九宫格

每个元素宽高为 1:1 的九宫格布局

同时适用于:PCUni-App小程序

九宫格布局

  • 方案一:CSS属性:aspect-ratio
    • 为盒子规定了首选纵横比,这个纵横比可以用于计算 auto 尺寸以及其他布局函数;
    • 设置为:aspect-ratio: 1 / 1
  • 方案二:padding + absolute
    • 设置padding-toppadding-bottom100%,此时会按照宽度进行撑高包含块;
    • 子元素设置为absolute并撑满其包含块;

1、aspect-ratio

2、Padding + Absolute

豫ICP备18027433号 萌ICP备20240840号 本网站由又拍云提供CDN加速/云存储服务