CSS 水平布局实战：用 Flexbox 精准对齐 div 容器-html教程-PHP中文网

CSS 水平布局实战：用 Flexbox 精准对齐 div 容器

本文详解如何使用现代 css flexbox 实现三个区块（左文本、居中图片、右文本）的响应式水平对齐，替代过时的 float 和绝对定位，兼顾可扩展性与维护性。

在构建个人作品集等响应式页面时，让多个

（如技能介绍、头像图片、职业简介）在同一行水平排列并随窗口缩放自适应，是常见但易出错的需求。你当前代码中使用 float: left/right 配合固定 right 值的方式不仅难以维护，还会导致脱离文档流、父容器高度塌陷、响应失效等问题。

✅ 推荐方案：Flexbox 布局
Flexbox 是专为一维布局（行或列）设计的现代 CSS 模块，语义清晰、控制精准，且天然支持响应式。只需为包裹三块内容的父容器（即

）设置 display: flex，即可轻松实现水平对齐与弹性分配。

✅ 正确的 CSS 修改（替换原 main 样式）

main {
  width: 100%;
  margin: 0 auto;
  display: flex;                 /* 启用 Flex 布局 */
  align-items: center;           /* 垂直居中所有子项（避免上下错位） */
  justify-content: space-between; /* 水平方向均匀分布：左-中-右 */
  gap: 2rem;                     /* 子项间统一间距（推荐替代 margin） */
  padding: 2rem;
  flex-wrap: wrap;               /* 可选：小屏下自动换行（提升移动端体验） */
}

✅ HTML 结构保持简洁（无需修改）

确保三个子

按逻辑顺序书写（左→中→右），Flex 会按源顺序渲染：

<main><div class="skills side">...</div>   <!-- 左侧 -->
  <div class="photo">...</div>         <!-- 中间 -->
  <div class="ocp side">...</div>      <!-- 右侧 -->
</main>

⚠️ 同时需移除的旧样式（关键！）

请务必删除以下冲突规则，否则 Flex 将失效：

前端设计引擎

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

/* ❌ 删除这些（与 Flex 冲突） */
.skills { float: left; left: 3%; }
.ocp { float: right; right: 250px; }
.photo img { margin: 0.2% 0 15% 0; height: 20%; } /* 改为用 flex 控制尺寸 */

? 响应式增强建议

为适配移动设备，在小屏幕下可改为垂直堆叠：

@media (max-width: 768px) {
  main {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }
  .photo img {
    max-width: 100%;
    height: auto;
  }
}