h5中的宫格元素居中几种方式

已于 2024-08-19 10:03:10 修改
阅读量127 收藏 3
点赞数 2
分类专栏： 移动端 文章标签： 前端
于 2024-08-19 10:00:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27702739/article/details/141312663
版权

元素的居中实现很多，css和js都可以完成效果。
这里，记录下在h5实现宫格的居中对齐。我这里主要是3*3, 3*2, 3*1,最后一行分别的是3个元素，2个元素，1个元素的情况。

3*3效果

  • 也是最简单的效果
    在这里插入图片描述
<body>
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div>
   <div class="box">4</div>
   <div class="box">5</div>
   <div class="box">6</div>
   <div class="box">7</div>
   <div class="box">8</div>
   <div class="box">9</div>
  </body>

body{
  background-color: slateblue;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.box{
  width: 100px;height: 100px;
  background-color: cornflowerblue;
  margin: 10px;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

3*2效果

<body>
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div>
   <div class="box">4</div>
   <div class="box">5</div>
   <div class="box">6</div>
   <div class="box">7</div>
   <div class="box">8</div>
   <div class="box">9</div>
   <div class="box">10</div>
   <div class="box">11</div>
  </body>
  • 这样的居中，不是我想要的效果，要最后一行能左对齐·，线下继续使用上面的css无法做到
    在这里插入图片描述
  • 改造css,增加下面的代码
body::after{
  content: '';
  width: 100px;
  height: 100px;
  margin: 10px;
}

这样，我们就实现了最后一行的左对齐
在这里插入图片描述

3*1的效果

同理，最后一行只有一个元素的时候
在这里插入图片描述

body::after{
  content: '';
  width: calc(110px * 2);
  height: 100px;
  margin: 10px;
}

大家可以根据自己的实际情况，去扩展下，4*4等其他的场景。

风清云淡_A
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
GridImageView：宫格方式显示ImageView
02-17
GridImageView宫格方式显示ImageView上面工程我用的是Kotlin写的，不会kotlin也没有关系，方法都一样的效果图 1.添加如下配置到你的工程中dependencies { implementation ' ...
四宫格练习题
01-21
Sheet13242121241322134223123411323122311424433443321213223444143321123434231123422411113132244141423
（中小学教育）一下10-听声虚宫格生字.ppt
09-22
【描述】中的"（中小学教育）一下10-听声虚宫格生字.ppt"进一步表明，这是一个教育工具，旨在提升孩子们对汉字的认读和书写能力，可能包含虚宫格练习，这种练习方式常用于指导学生规范写字，帮助他们掌握汉字的结构...
6宫格自动轮换jquery幻灯片特效代码
03-20
【jQuery幻灯片特效】是网页...总之，"6宫格自动轮换jQuery幻灯片特效"是一种高效且吸引人的网页元素，通过合理运用技术，可以提升网站的整体用户体验。掌握这类特效的开发，对于前端开发者来说是非常有价值的技能。
qt六宫格界面
04-02
在本案例中，我们关注的是“qt六宫格界面”，这通常指的是使用Qt库来设计的一种布局，其中包含六个独立的、网格状排列的区域，每个区域可以作为功能模块或展示不同内容。 Qt UI（用户界面）的设计允许开发者通过...
JAVA-WEB资源配置
caryeko的专栏
08-15 213
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 440
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
pywebview 入门
最新发布
小小宾的博客
08-18 522
pywebview 是一个轻量级的 python 库，旨在简化桌面应用程序的开发。它利用系统的 WebView 组件，使得开发人员可以使用现代 Web 技术（HTML、CSS、JavaScript）来创建用户界面，同时使用 python 处理业务逻辑。pywebview 使得创建跨平台桌面应用程序变得更加简单和高效。
提升前端性能的JavaScript技巧
han2434的博客
08-14 815
一个快速响应、高效运行的Web页面不仅能提升用户体验，还能在一定程度上影响网站的SEO排名。本文汇总了一系列JavaScript技巧，以帮助开发者提升前端性能，并提供实际的代码示例。
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 338
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
使用 TinyVue 组件库搭建前端项目的实操体验
Echo_Wish的博客
08-14 815
在这个示例中，我们创建了一个包含用户名和密码输入框的表单，并添加了表单验证功能。总的来说，TinyVue 组件库为前端开发提供了强大的支持和便利。通过这次活动，我不仅提升了自己的开发技能，还对 OpenTiny 的产品有了更深入的了解。在这个示例中，我们引入了 TinyButton 组件，并在按钮点击时触发一个成功消息。TinyVue 组件库提供了丰富的 UI 组件，可以满足各种业务需求。在项目中，我使用了 TinyVue 提供的多个组件来构建页面。首先，我按照官方文档的指引，完成了开发环境的准备工作。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 990
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
vue-lic（三）
qq_64669006的博客
08-14 280
Vue 应用中的跨域问题通常是由于浏览器的同源策略引起的，它阻止了一个源（origin）的网页上的JavaScript 代码请求另一个源的资源。也就是说，只要https://www.baidu.com中https://，www.baidu，.com中有一个不一样，就会导致存在跨域问题。2.逆向传递数据(vue不支持逆向传递)-->子组件给父组件传递，通过$emit("事件名",要传递的数据)自定义监听事件。，这里因为本身就有/api，再添加了一个/api，所以需要去掉一个/api，也就是重写路径。
web前端之html弹窗面板的popover新属性
软件毕设协助及软件开发、智慧电子模块、计算机科技、软件开发、硬件开发、程序员、写代码、工程师、互联网、物联网、技术栈、程序、编程、IT。
08-18 3593
web前端之html弹窗面板的popover新属性
微信小程序电话号码授权
qq_36022463的博客
08-16 484
文档：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-info/phone-number/getPhoneNumber.html。文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html。掉这个获取电话号码，需要先获取access_token。获取token，有效期是两小时，需要缓存，
尚品汇-前端面包屑平台属性、排序处理（三十三）
dengfengling999的博客
08-17 404
早期单一服务器，用户认证。缺点：单点性能压力，无法扩展分布式，SSO(single sign on)模式解决 ：用户身份信息独立管理，更好的分布式管理。可以自己扩展安全策略跨域不是问题缺点：认证服务器访问压力较大。业务流程图{用户访问业务时，必须登录的流程}{单点登录的过程}
总结常见报错信息
m0_68903702的博客
08-16 293
在@Controller注解中，返回的是字符串或者是字符串匹配的模板名称，即直接渲染视图，与html页面配合使用的，java后端的代码要结合html的情况进行渲染,使用model对象（或者modelandview）的数据将填充user视图中的相关属性，然后展示到浏览器；而在@RestController中，返回的应该是一个对象，即return一个user对象，这时，在没有页面的情况下，也能看到返回的是一个user对象对应的json字符串。情形一：若前端传入Json格式，后端使用。
NVDLA专题4：具体模块介绍——Convolution DMA
fangfanglovezhou的博客
08-14 582
NVDLA专题4：具体模块介绍——Convolution DMA
前端实现接口调用进度百分比
qq_42072014的博客
08-14 177
通过本文，我们学习了如何使用 XMLHttpRequest 和 Fetch API 在前端实现接口调用进度百分比的显示。这些技术可以帮助提升用户体验，特别是在涉及文件上传或大型数据传输的场景中。如果你在实现过程中遇到任何问题，欢迎随时提问。
安卓中利用gridlayout布局，实现手机9宫格布局。
05-16
可以使用GridLayout来实现手机9宫格布局，以下是一个示例代码： ```xml <GridLayout android:layout_width="match_parent" android:layout_height="match_parent" android:rowCount="3" android:columnCount="3" android:alignmentMode="alignMargins" android:columnOrderPreserved="false"> <Button android:text="1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_row="0" android:layout_column="0"/> <Button android:text="2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_row="0" android:layout_column="1"/> <Button android:text="3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_row="0" android:layout_column="2"/> <Button android:text="4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_row="1" android:layout_column="0"/> <Button android:text="5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_row="1" android:layout_column="1"/> <Button android:text="6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_row="1" android:layout_column="2"/> <Button android:text="7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_row="2" android:layout_column="0"/> <Button android:text="8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_row="2" android:layout_column="1"/> <Button android:text="9" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_row="2" android:layout_column="2"/> </GridLayout> ``` 在GridLayout中，我们设置了rowCount和columnCount属性来定义行数和列数，alignmentMode属性来设置对齐方式，columnOrderPreserved属性来设置列的顺序是否保留。然后，我们在每个Button上设置了layout_row和layout_column属性来指定它在GridLayout中的位置。这样就可以实现手机9宫格布局了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值