使用 Flexbox 实现精准图文布局——解决图片错位与文字不显示问题-html教程-PHP中文网

使用 Flexbox 实现精准图文布局——解决图片错位与文字不显示问题

本文详解如何用现代 css flexbox 替代绝对定位，高效解决多图与文本错位、重叠、隐藏等常见布局难题，提供可直接运行的响应式代码示例与关键实践要点。

本文详解如何用现代 css flexbox 替代绝对定位，高效解决多图与文本错位、重叠、隐藏等常见布局难题，提供可直接运行的响应式代码示例与关键实践要点。

在初学 HTML/CSS 布局时，过度依赖 position: absolute 容易导致元素脱离文档流、相互覆盖、响应失效等问题——正如您遇到的：文字（

）被隐藏、图片位置“诡异联动”、调整一个值就引发全局偏移。根本原因在于：.image 容器未设置尺寸，而内部 .topleft 和 .topright 均为绝对定位，彼此无空间关系约束；同时

被包裹在第一个 .image 内却未设 z-index 或显式定位，极易被后续元素遮挡或因负 margin-top 脱离可视区域。

✅ 推荐方案：采用 Flexbox 布局——语义清晰、自动对齐、天然响应、无需手动计算坐标。

以下是一个结构清晰、可立即复用的优化实现：



  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Japanese Journey!</title><!-- Bootstrap 5 CDN (optional, for utility classes) --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><style>
    /* 主容器：启用 Flex 布局，水平排列 + 垂直居中 */
    .layout-container {
      display: flex;
      flex-direction: column;   /* 纵向堆叠：顶部图文区 + 底部证书 */
      min-height: 100vh;
      margin: 0;
      padding: 0;
    }

    /* 顶部图文区：双图+标题并排 */
    .header-section {
      display: flex;
      justify-content: space-between;  /* 左右图片分离 */
      align-items: center;             /* 垂直居中对齐 */
      padding: 2rem 5%;
      background-color: #f8f9fa;
      gap: 2rem; /* 更优雅的间距控制（替代 margin） */
    }

    .header-section img {
      width: 400px;
      height: 250px;
      object-fit: cover;
      border: 5px solid #555;
      border-radius: 4px;
    }

    .header-title {
      font-size: 3.5rem;
      font-weight: 700;
      color: #2c3e50;
      text-align: center;
      margin: 0;
      flex: 1; /* 占据剩余空间，确保标题居中于两图之间 */
      padding: 0 1.5rem;
    }

    /* 底部证书区：右下角固定定位（如需保持原意）或 Flex 对齐 */
    .certificate-section {
      margin-top: auto; /* 推到底部 */
      padding: 1.5rem 5%;
      display: flex;
      justify-content: flex-end;
    }

    .certificate-img {
      width: 400px;
      height: 500px;
      object-fit: contain;
      border: 5px solid #555;
      border-radius: 4px;
    }

    /* 响应式适配 */
    @media (max-width: 768px) {
      .header-section {
        flex-direction: column;
        gap: 1.5rem;
      }
      .header-title {
        font-size: 2.5rem;
      }
      .certificate-img {
        width: 100%;
        max-width: 320px;
        height: auto;
      }
    }
  </style><div class="layout-container">
    <!-- 顶部图文区 -->
    <section class="header-section"><img src="JapanPic.jpg" alt="Japan Background - Left"><h1 class="header-title">Learning Japanese</h1>
      <img src="JapanPic.jpg" alt="Japan Background - Right"></section><!-- 底部证书区 --><section class="certificate-section"><img src="JapaneseN4.png" alt="Japanese N4 Certificate" class="certificate-img"></section>
</div>

? 关键改进说明：