MediaWiki:Common.css:修订间差异

删除的内容 添加的内容
XP-jia​(留言 | 贡献)
测试
XP-jia​(留言 | 贡献)
继续更新布局
第96行:
}
 
/* 让软件信息表格填满整个页面体布局 */
.software-info {
display: flex;
flex-direction: column; /* 默认移动端纵向排列 */
width: 100%;
gap: 10px; /* 每组之间的间距 */
align-items: center; /* 水平居中 */
}
 
/* 每一组的默认样式(移动端:占满整行,并水平居中) */
.software-info-section {
width: 100%; /* 在移动端时,默认占满整行 */
display: flex;
flex-direction: column; /* 让表格填充整个区域 */
flex-grow: 1;
max-width: 600px; /* 限制移动端最大宽度,防止超宽 */
}
 
/* 适配桌面端(大屏幕:四组横向):按顺序排列,等且宽)度调整 */
@media (min-width: 768px) {
.software-info {
flex-direction: row; /* 横向排列 */
flex-wrap: nowrap; /* 强制一行显示四组排列 */
justify-content: space-between; /* 让四组均分空间 */
align-items: flex-start; /* 顶端对齐 */
}
 
/* 设定每一类的宽度比例 */
.software-info-section {▼
.software-info-basic {
width: 25%; /* 每组宽度占总宽度的 1/4基本信息 */
}
 
.software-info-architecture {
width: 30%; /* 架构与版本(较大) */
}
 
.software-info-features {
width: 30%; /* 功能与发行(较大) */
}
 
.software-info-license {
width: 15%; /* 贡献与许可证(较小) */
}
}
第129行 ⟶ 第145行:
width: 100%;
border-collapse: collapse;
flex-grow: 1; /* 让表格填满父容器 */
}
 
第145行 ⟶ 第161行:
padding: 8px;
text-align: left;
}
 
/* 让移动端的表格水平居中 */
@media (max-width: 768px) {
▲ .software-info-section {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
}