Foundation 网格 - 水平堆叠
以下实例创建了一个基本的网格系统，在 PC 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。
实例
Baidu
Baidu
尝试一下 »
Note 提示: .small|medium|large-* 类中的数字指定了跨越的列数。所以， .small-1 跨越 1 列, .small-4 跨越 4 列, .small-6 跨越 6 列 (50% 宽度) 等。
注意: 要保证数列加起来是 12 列!
Foundation 网格 - 水平堆叠
2024-11-25
13
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
本示例展示了一个基础网格系统，适用于不同设备。在PC和平板上，元素水平排列；在手机等小屏设备上，元素则水平堆叠显示。通过使用.small-*, .medium-*, .large-*类指定各列宽度，确保总和为12列以实现响应式布局。
相关文章
|
iOS开发
|
4天前
Foundation 块状网格
块状网格用于页面内容的均匀分布，如在一行中显示四张图片。通过为元素添加 .small|medium|large-block-grid-num 类来实现，其中 num 指定均分数。支持不同屏幕尺寸下显示不同数量的块。
15
3
3
|
6天前
Foundation 网格系统1
Foundation 网格系统基于12列布局，支持响应式设计，能自动适应不同屏幕尺寸。通过 .small、.medium 和 .large 类别，可针对手机、平板和电脑等设备创建灵活的布局。每行内的列数总和需为12，如 <div class="small-12 columns"> 表示100%宽度，<div class="small-8 columns"> 和 <div class="small-4 columns"> 分别表示66.6%和33.3%宽度。
12
0
0
|
6天前
|
前端开发
容器
Foundation 网格系统2
Foundation 网格系统适用于不同设备，包括手机、平板和桌面设备，支持12列布局，具备内嵌、偏移及列排序功能。在宽屏设备上，网格最大宽度为62.5rem，可通过CSS调整max-width或使用背景色跨越全页。
13
0
0
|
2月前
|
JavaScript
前端开发
API
|
6月前
|
存储
算法
计算机视觉
|
存储
监控
架构师
|
JSON
搜索推荐
安全
|
存储
安全
BI