移动端布局
文章图片
image.png 今天讲讲移动端常见的这种布局，描述一下：
每行显示三个元素，每个元素之间的间距固定，元素的宽度根据屏幕大小自适应【移动端布局】下面简单代码展示
首页 - 锐客网 html, body{
margin: 0;
padding: 0;
}
.box{
padding: 10px 30px;
}
ul{
width: calc(100% + 30px);
padding: 0;
display: flex;
flex-wrap: wrap;
}
li{
line-height: 100px;
list-style: none;
background-color: skyblue;
flex: 0 0 calc(33.33% - 30px);
margin-right: 30px;
margin-bottom: 30px;
}
- 1
- 1
- 1
- 1
- 1
- 1
- 1
- 1
- 1
- 1
- 1
效果图
文章图片
image.png 如果是简单的这种布局可以采用上方这种写法布局，但是，比如我们遇到下面这种页面，改怎么做，上面的这种方法还是适用吗？
文章图片
image.png 感兴趣的童鞋我们可以交流一下方案哦～
期待大家参与，我们一起做出更多的方案～
推荐阅读
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- Node.js中readline模块实现终端输入
- django-前后端交互
- 移动端h5调试方法
- “沉溺”疫情
- Jsr303做前端数据校验
- 40under40|40under40|思想会-那什么拯救你，我的＂高端＂甲方＂爸爸＂
- 端银×八正道|端银×八正道 | 21天百万实操信用卡特训营045+Dodo第5次作业
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 端午偶感