HTML+CSS制作人物信息面板遇布局问题求助

需求说明 #

需要实现左侧带竖版图片、右侧面板内左上角小头像+右上角标题、标题下方文本列表的人物信息面板，当前布局及尺寸存在混乱问题，使用Visual Studio Code进行HTML/CSS开发。

修改后的HTML代码 #

<div class="role">
    <img id="role1" src="../images/owner.png" alt="Syndel所有者">
    <div class="box">
        <div class="box-header">
            <img class="profile-pic" src="../images/sinswordace150.png" alt="SinSwordAce的头像">
            <h3 class="name-title">SinSwordAce</h3>
        </div>
        <ul class="details-list">
            <li>职位：Syndel所有者</li>
            <li>核心职责：项目整体规划与管理</li>
            <li>联系邮箱：example@domain.com</li>
        </ul>
    </div>
</div>

修改后的CSS代码 #

/* 外层容器：实现左右元素水平居中对齐 */
.role {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 15px;
}

/* 右侧信息面板：固定尺寸，内部垂直布局 */
.box {
    width: 900px;
    height: 300px;
    border-radius: 20px;
    border: 7px solid rgba(169, 169, 169, 0.25);
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    box-sizing: border-box; /* 避免内边距撑大容器 */
    display: flex;
    flex-direction: column;
}

/* 面板头部：头像左对齐、标题右对齐 */
.box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.profile-pic {
    width: 150px;
    height: 150px;
    /* 可选：添加圆角让头像变成圆形 */
    border-radius: 50%;
}

.name-title {
    margin: 0;
    font-size: 24px;
    color: #ffffff; /* 可根据主题调整颜色 */
}

/* 详细信息列表：清除默认样式，优化排版 */
.details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.8; /* 增加行高提升可读性 */
}

核心修复点 #

• 给.role容器添加display: flex，解决左侧图片与右侧面板的水平排列问题，同时用align-items: center保证垂直居中
• 重构HTML结构：移除原代码中ul嵌套div的不规范写法，改用语义化的.box-header和.details-list，符合HTML标准
• 给.box设置box-sizing: border-box，确保内边距不会超出设定的宽高；通过flex-direction: column让头部和列表垂直分布
• 用.box-header的justify-content: space-between实现头像左、标题右的布局，避免用text-align导致的定位混乱
• 优化列表样式，清除默认列表符号，调整字体大小和行高，提升内容可读性

内容的提问来源于stack exchange，提问作者SinSwordAce