HTML/CSS入门开发求助：实现左侧居中名称+右侧2×2图片网格的响应式标题页

嘿，我完全get你想要搭建的这个标题页效果——左侧居中展示名字，右侧是整齐的2×2图片网格，还要能适配不同屏幕大小对吧？我看了你写的代码，有几个小细节可以调整，让布局更稳定且符合响应式要求，下面是修正后的完整代码，还有我做的关键修改说明：

修正后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Mawusi Amos</title>
</head>
<body>
    <!-- 整体容器，用flex实现左右分栏 -->
    <div class="page-container">
        <!-- 左侧名称区域 -->
        <div class="name-section">
            <p class="Name">Mawusi Amos</p>
        </div>
        <!-- 右侧图片网格区域 -->
        <div class="overall-profile">
            <!-- Strength and Conditioning -->
            <div id="strength">
                <img src="Resources/Images/download.jpg" alt="Strength and Conditioning">
            </div>
            <!-- Coding -->
            <div id="coding">
                <img src="Resources/Images/coding.jpg" alt="Coding">
            </div>
            <!-- Instructor -->
            <div id="Instructor">
                <img src="Resources/Images/teaching.jpg" alt="Instructor">
            </div>
            <!-- Personal Trainer -->
            <div id="personal">
                <img src="Resources/Images/Untitled design (1).png" alt="Personal Trainer">
            </div>
        </div>
    </div>
</body>
</html>

修正后的CSS代码（style.css） #

/* 全局样式初始化 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: bisque;
    min-height: 100vh;
}

body {
    min-height: 100vh;
}

/* 整体页面容器，用flex实现左右分栏，响应式时自动换行 */
.page-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 100vh;
    padding: 2rem;
    gap: 2rem;
    flex-wrap: wrap;
}

/* 左侧名称区域，占比适配，确保文字垂直水平居中 */
.name-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 300px;
}

.Name {
    font-size: clamp(2rem, 8vw, 6rem); /* 响应式字体大小，根据屏幕宽度自动调整 */
    font-family: serif;
    text-align: center;
}

/* 右侧图片网格容器 */
.overall-profile {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列，每列等分宽度 */
    grid-template-rows: repeat(2, auto); /* 2行，高度自适应内容 */
    gap: 1.5rem; /* 图片之间的间距 */
    min-width: 300px;
    max-width: 800px;
}

/* 图片统一样式 */
.overall-profile img {
    width: 100%;
    height: auto; /* 保持图片比例，避免拉伸变形 */
    min-height: 200px;
    object-fit: cover; /* 图片填充容器，裁剪多余部分 */
    border-radius: 20px;
    border: 3px groove #888;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 正确的阴影写法 */
}

/* 媒体查询，小屏幕时调整布局为上下排列 */
@media (max-width: 768px) {
    .page-container {
        flex-direction: column;
        text-align: center;
    }
    .overall-profile {
        grid-template-columns: 1fr; /* 小屏幕时改为单列显示 */
    }
}

关键修改说明 #

• 整体布局重构：用flexbox实现页面的左右分栏，替代原来的绝对定位，这样布局更稳定，且天然支持响应式换行
• 响应式字体：用clamp()函数设置名字的字体大小，在小屏幕自动缩小，大屏幕放大，避免文字溢出
• 图片网格优化：把图片容器的grid布局改为repeat(2,1fr)，让两列宽度自适应，同时用object-fit: cover保持图片比例，不会变形
• 响应式适配：添加媒体查询，当屏幕宽度小于768px时，自动把左右分栏改为上下排列，图片网格也变成单列，适配手机等小屏幕
• 路径优化：把图片的本地绝对路径改成相对路径，这样项目部署到服务器上也能正常显示
• 样式细节修正：修复了box-shadow的错误写法，用box-sizing: border-box统一盒模型，避免布局偏移
• 容器间距：添加gap属性控制元素之间的间距，替代margin的繁琐设置

这样调整后，你的页面就能完美实现左侧居中名称+右侧2×2图片网格的效果，同时在手机、平板、电脑等不同设备上都能正常显示啦！

内容来源于stack exchange