<template>
<!--底部组件-->
<div class="bottom">
<div class="left">
<div class="close"></div>
</div>
<div class="right" > 4 / 12</div>
</div>
</template>
<style scoped lang="less">
.bottom {
height: 1.45rem;
display: grid;
grid-template-columns: 1.5rem 17.37rem;
grid-template-rows: 1.25rem;
grid-column-gap: 0.33rem;
div {
font-size: 0.2rem;
color: #000000;
}
.left {
background: rgba(255,203,70,0.2);
border-radius: 0 0.7rem 0.7rem 0;
.close {
background-image: url('./assets/close.png');
background-size: 100%;
background-repeat: no-repeat;
width: 0.5rem;
height: 0.5rem;
CSS 实现 grid 布局中 div 在表格里的居中效果
最新推荐文章于 2024-08-15 15:13:32 发布
本文详细讲解如何使用CSS Grid布局让div元素在表格样式中实现水平和垂直居中。通过设置grid-template-columns, grid-template-rows, align-items和justify-content属性,可以轻松创建灵活且响应式的居中网格布局。"
133063529,19673930,修复Windows 10 Win+G录屏功能故障,"['操作系统', 'Windows', '录屏工具', '问题解决', 'C#编程']
摘要由CSDN通过智能技术生成