<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 微软雅黑;
}
body {
display: grid;
grid-template-rows: auto 1fr auto; /* 主体部分的行布局 */
grid-template-columns: 1fr 4fr 1fr; /* 主体部分的列布局 */
height: 100vh;
overflow: hidden;
gap: 20px; /* 添加间隙 */
}
.header {
grid-column: 1 / 4;
padding: 13px;
height: 13.9vh;
font-size: 1.5vw;
color: white;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
text-align: center;
background-color: #04485F;
line-height: 5vh;
}
.header span {
font-size: 2vw;
font-weight: normal;
line-height: 1vh;
}
.left {
grid-column: 1;
background-color: white;
padding: 0;
margin: 0 1vh;
margin-top: -0.2vh;
text-align: center;
display: flex;
justify-content: center; /* 垂直居中内容 */
height: 83vh; /* 让左侧区域的
高度占满父级 */
width: 50vh;
border: 3px solid #04485F;
}
.left img {
width: 100%; /* 确保图片占满父容器 */
height: 100%; /* 确保图片占满父容器 */
object-fit: cover; /* 图片覆盖父容器 */
}
.right {
grid-column: 3;
background-color: white;
padding: 0;
height: 62vh;
width: 40vh;
margin: 0px 1vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden; /* 确保不会超出容器 */
object-fit: contain;
text-align: center;
margin-top: -0.2vh;
border: 3px solid #04485F;
}
.right img {
width: 100%; /* 确保图片占满父容器 */
height: 100%; /* 确保图片占满父容器 */
object-fit: cover; /* 图片覆盖父容器 */
}
.main {
grid-column: 2;
display: flex;
flex-direction: column;
justify-content: space-between; /* 确保内容分布均匀 */
align-items: center;
text-align: center;
font-family: 微软雅黑;
font-size: 2.8vw;
font-weight: bold;
margin-top: 1vh;
padding: 0;
height: 100%; /* 保持
高度填充 */
}
.main span {
font-weight: normal;
font-size: 1.6vw;
}
.table {
width: 75vh;
margin-top: -2vh;
border-collapse: separate; /*
避免单元格之间合并 */
border-spacing: 0 1vh; /* 只在垂直方向添加间隙 */
}
.table td:nth-child
(1
) {
background-color: #04485F; /* 设置左侧单元格的背景颜色 */
color: white;
width: 40%;
}
.table-d {
width: 40vh;
border-collapse: separate; /*
避免单元格之间合并 */
margin-top: -24.8vh;
border-spacing: 0 1vh; /* 只在垂直方向添加间隙 */
}
.table td {
padding: 0; /* 为每个单元格添加内边距 */
text-align: center;
vertical-align: middle;
border: 3px solid #04485F;
background-color: white;
height: 20vh;
}
.table-d td {
padding: 0; /* 为每个单元格添加内边距 */
text-align: center;
vertical-align: middle;
border: 3px solid #04485F;
background-color: white;
height: 20vh;
}
.table-d td:nth-child
(1
) {
background-color: #04485F; /* 设置左侧单元格的背景颜色 */
color: white;
width: 56%;
}
.location-box,
.location-box-d td {
padding: 0;
text-align: center;
vertical-align: middle;
border: 3px solid #04485F;
background-color: white;
}
/* 保持 location-box-d 独立，防止干扰 */
.location-box-d {
grid-column: 3;
grid-row: 3;
padding: 1vh;
width: 100%;
margin-top: -1.4vh;
text-align: center;
font-family: 微软雅黑;
font-size: 2.4vw;
font-weight: bold;
display: flex; /* 使用flex布局 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
position: relative; /* 使其独立定位 */
}
.location-box-d span {
font-weight: normal;
font-size: 1.3vw;
}
</style>
</head>
<body>
<div class="header">
<h1>RF 发射线圈工位<br><span>VTC Station</span></h1>
</div>
<div class="left">
<img src="your-image-url.jpg" alt="图一">
</div>
<div class="main">
<table class="table">
<tr>
<td>工单号<br><span>Work Order</span><br></td>
<td>{{ work_order }}</td> <!-- 使用
占位符 -->
</tr>
<tr>
<td>序列号<br><span>Serial Number</span><br></td>
<td>{{ serial_number }}</td> <!-- 使用
占位符 -->
</tr>
<tr>
<td>生产状态<br><span>Production Status</span><br></td>
<td><img src="zhengchang.png" alt="生产状态" width="150" height="150"></td> <!-- 使用
占位符 -->
</tr>
<tr>
<td>生产进度<br><span>Progress</span><br></td>
<td><img src="{{ progress_image }}" alt="生产进度"></td> <!-- 使用
占位符 -->
</tr>
</table>
</div>
<div class="right">
<img src="20250528-173733.jpg" alt="图二">
</div>
<div class="location-box-d">
<table class="table-d">
<tr>
<td>制作人员<br><span>Production Staff</span><br></td>
<td>{{ staff_name }}</td> <!-- 使用
占位符 -->
</tr>
</table>
</div>
</body>
</html>
上述HTML编码，在自己电脑上显示正常，在大屏上显示排版就乱了
该博客介绍了巧用margin和padding的百分比值来实现高度自适应的方法，此方法可起到占位作用，避免页面闪烁，属于前端开发领域的实用技巧。
扫一扫
1368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
