本文教你使用现代 flexbox 布局精准实现「左侧头像 + 右侧标题与详情」的人物信息面板，解决传统浮动或内联布局导致的尺寸错乱、对齐失效等问题，并提供可直接运行的结构化代码与关键样式解析。
本文教你使用现代 flexbox 布局精准实现「左侧头像 + 右侧标题与详情」的人物信息面板，解决传统浮动或内联布局导致的尺寸错乱、对齐失效等问题，并提供可直接运行的结构化代码与关键样式解析。
要构建一个结构清晰、尺寸稳定、视觉平衡的人物信息面板（如头像居左、姓名居右上、信息列表居右下），核心在于放弃嵌套无语义的 <ul><li> 结构，转而采用语义化 <div> + Flexbox 主轴/交叉轴控制。原代码中将图片、标题、详情全部塞进 <ul> 内，不仅违背 HTML 语义（列表项 ≠ 面板区域），更因默认列表样式和盒模型干扰，导致 text-align 失效、高度塌陷、布局不可控。
以下是推荐的重构方案，兼顾可维护性与浏览器兼容性（支持所有现代浏览器）：
✅ 正确 HTML 结构（语义清晰，层级扁平）
<div class="role">
<!-- 可选：顶部角色标识图 -->
<img id="role1" src="../images/owner.png" alt="Owner of Syndel" style="display: none;">
<div class="box">
<div class="left-side">
<img src="../images/sinswordace150.png" alt="SinSwordAce's Profile Picture" width="150" height="150">
</div>
<div class="right-side">
<div class="title">
<h3>SinSwordAce</h3>
</div>
<div class="details">
<ul>
<li><strong>Role:</strong> Owner & Founder</li>
<li><strong>Joined:</strong> Jan 2022</li>
<li><strong>Status:</strong> Active Contributor</li>
<li><strong>Location:</strong> Tokyo, Japan</li>
</ul>
</div>
</div>
</div>
</div>✅ 关键 CSS（Flexbox 驱动，精准分区）
.role {
margin-top: 20px;
display: flex;
justify-content: center; /* 水平居中整个面板 */
}
.box {
display: flex;
width: 900px;
height: 300px;
border-radius: 20px;
border: 7px solid rgba(169, 169, 169, 0.25);
background: rgba(255, 255, 255, 0.05);
overflow: hidden; /* 防止子元素溢出圆角 */
}
.left-side {
flex: 0 0 45%; /* 固定宽度占比，留白防紧贴 */
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: #1e1e2e; /* 可选背景增强对比 */
}
.left-side img {
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.right-side {
flex: 1; /* 剩余空间自适应 */
display: flex;
flex-direction: column; /* 垂直排列 title + details */
padding: 20px;
}
.title {
flex: 0 0 auto; /* 不拉伸，高度由内容决定 */
margin-bottom: 12px;
}
.title h3 {
margin: 0;
font-size: 1.8rem;
font-weight: 700;
color: #e6e6e6;
}
.details {
flex: 1; /* 占据剩余全部垂直空间 */
overflow-y: auto; /* 内容超长时滚动 */
}
.details ul {
list-style: none;
margin: 0;
padding: 0;
}
.details li {
margin-bottom: 8px;
line-height: 1.5;
color: #a6adc8;
font-size: 1rem;
}⚠️ 注意事项与优化建议
- 避免滥用 <ul>：仅当内容逻辑为「无序列表」时使用；此处「角色、加入时间」等是属性集合，用 <dl>（定义列表）更语义化，但 <ul> 亦可接受——关键是移出 <li> 包裹无关容器（如 .picture 和 .title）。
- 图片尺寸控制：为头像添加 width/height 或 max-width: 100%，防止原始图过大撑破容器；推荐使用 object-fit: cover 配合 border-radius 实现裁剪式圆形头像。
- 响应式增强：在小屏设备上，可添加媒体查询将 .box 改为 flex-direction: column，使头像位于上方，信息区居下，提升移动端体验。
- 无障碍访问：确保 <img> 的 alt 属性准确描述图像内容（如 "SinSwordAce's profile picture, smiling, wearing glasses"），并为 .title h3 提供足够对比度（建议 ≥ 4.5:1）。
这套方案摒弃了“靠 text-align 硬调位置”的脆弱方式，以 Flexbox 的 flex 分配、flex-direction 和 align-items 为锚点，让布局真正可控、可预测、易扩展。复制即用，稍作调整即可适配任意人物信息场景。
