使用flex row-reverse后布局异常，如何修改HTML/CSS实现目标桌面设计？

架构老林

2026-8-4

问题与解决方法

问题描述

已完成移动端设计，想要实现桌面端布局（目标效果为图片在右侧，文本在左侧，文本内容左对齐，统计项横向排列），但使用flex-direction: row-reverse后布局异常，文本元素分散排列，无法达到预期效果。

问题分析

flex子项过多：桌面端.container设为flex后，内部的.img-component、.main-header、.paragraph、.stat-heading均为独立flex子项，导致布局分散，而非图片与文本块并列。
图片容器宽度未控制：未给图片容器设置flex占比，导致宽度适配异常。
文本对齐未适配桌面端：移动端的居中对齐在桌面端不符合目标设计，需要改为左对齐。
统计项布局未适配：桌面端统计项需要横向排列，但当前为块级元素堆叠。
CSS拼写错误：媒体查询中picutre应为picture，导致图片样式不生效。

解决步骤

包裹文本内容：将.main-header、.paragraph、.stat-heading放入同一个容器（如.text-content），使.container仅包含两个flex子项：图片容器和文本容器。
设置flex占比：给.img-component和.text-content设置flex: 1，让两者平分容器宽度。
调整文本样式：桌面端将文本对齐改为左对齐，添加内边距保证内容间距。
修改统计项布局：桌面端给.stat-heading设置display: flex，横向排列统计项，并添加间距。
修正CSS拼写错误：将picutre改为picture。

修改后的代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="styles/style.css">
  <title>Frontend Mentor | Stats preview card component</title>
</head>
<body>
  <div class="container">
    <div class="img-component">
      <picture>
        <source media="(min-width: 768px)" srcset="/images/image-header-desktop.jpg">
        <source media="(min-width: 100px)" srcset="/images/image-header-mobile.jpg">
        <img class="main-img" src="/images/image-header-mobile.jpg" alt="main image">
      </picture>
    </div>
    <!-- 新增文本容器 -->
    <div class="text-content">
      <div class="main-header">
        <h1><span class="h1-main"> Get <span class="insight">insights</span> that</span>
          <span class="h1-first">help your business</span>
          <span class="h1-second"> grow.</span></h1>
      </div>
      <div class="paragraph">
        <p>
          <span class="para-1"> Discover the benefits of data</span>
          <span class="para-2">analytics and make better decisions</span>
          <span class="para-3">regarding revenue, customer</span>
          <span class="para-4">experience, and overall efficiency.</span>
        </p>
      </div>
      <div class="stat-heading">
        <div class="stat-item">
          <span class="stats">10k+</span>
          <span class="heading">COMPANIES</span>
        </div>
        <div class="stat-item">
          <span class="stats">314</span>
          <span class="heading">TEMPLATES</span>
        </div>
        <div class="stat-item">
          <span class="stats">12M+</span>
          <span class="heading">QUERIES</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS代码

@import url('css-reset.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap');

:root {
    --color-main-background: hsl(233, 47%, 7%);
    --color-card-background: hsl(244, 38%, 16%);
    --color-soft-voilet: hsl(277, 64%, 61%);
    --color-white-main: hsl(0, 0%, 100%);
    --color-white-paragraph: hsla(0, 0%, 100%, 0.75);
    --color-white-stats: hsla(0, 0%, 100%, 0.6);
    --font-weight-four: 400;
    --font-weight-seven: 700;
}

body {
    background-color: var(--color-main-background);
    font-weight: var(--font-weight-four);
    color: var(--color-white-main);
    margin: 0;
    min-height: 100vh; /* 确保body占满视口高度 */
}

.container {
    display: grid;
    grid-auto-flow: row;
    border-radius: 10px;
    justify-content: center;
    text-align: center;
    align-self: center;
    max-width: 350px;
    min-height: 750px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--color-card-background);
    overflow: hidden;
}

picture>* {
    width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.img-component {
    position: relative;
}

.img-component::after {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: hsl(277, 64%, 61%, 0.5);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.main-header {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: var(--font-weight-seven);
    font-size: 1.5rem;
    color: var(--color-white-main);
    margin-top: 20px;
}

.insight {
    color: var(--color-soft-voilet)
}

.h1-first,.h1-second {
    display: block;
}

.stats,.heading {
    display: block;
}

.paragraph {
    margin-top: 5px;
    margin-bottom: 30px;
    padding: 0 20px; /* 移动端添加左右内边距 */
}

.para-1,.para-2,.para-3,.para-4 {
    font-family: 'Inter', sans-serif;
    font-weight: var(--font-weight-four);
    font-size: 0.875rem;
    color: var(--color-white-paragraph);
    display: block;
    line-height: 1.75;
}

.stats {
    color: var(--color-white-main);
    font-family: 'Inter', sans-serif;
    font-weight: var(--font-weight-seven);
    font-size: 1.25rem;
    margin-top: 10px;
}

.heading {
    font-family: 'Inter', sans-serif;
    font-weight: var(--font-weight-four);
    font-size: 0.7rem;
    color: var(--color-white-stats);
    margin-bottom: 20px;
}

.stat-item {
    margin-bottom: 20px;
}

@media (min-width:768px) {
    body {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container {
        display: flex;
        flex-direction: row-reverse;
        min-height: 400px;
        max-width: 50rem;
        overflow: hidden;
        text-align: left; /* 桌面端文本左对齐 */
    }

    /* 修正拼写错误 */
    picture {
        max-width: 100%;
        max-height: 100%;
    }

    picture>* {
        width: 100%;
        height: 100%; /* 改为100%自适应容器高度 */
        border-top-left-radius: 0;
        border-bottom-right-radius: 10px; /* 添加右下角圆角 */
    }

    .img-component {
        position: relative;
        flex: 1; /* 图片容器占1份宽度 */
    }

    .img-component::after {
        border-top-left-radius: 0;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px; /* 添加右下角圆角 */
    }

    /* 文本容器设置flex占比和内边距 */
    .text-content {
        flex: 1;
        padding: 40px 60px;
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* 内容垂直分布 */
    }

    .main-header {
        margin-top: 0;
        font-size: 1.8rem;
    }

    .paragraph {
        margin-bottom: 0;
        padding: 0;
    }

    /* 桌面端统计项横向排列 */
    .stat-heading {
        display: flex;
        gap: 60px;
    }

    .stat-item {
        margin-bottom: 0;
    }
}

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

使用flex row-reverse后布局异常，如何修改HTML/CSS实现目标桌面设计？

问题描述 #

问题分析 #

解决步骤 #

修改后的代码 #

HTML代码 #

CSS代码 #

问题描述

问题分析

解决步骤

修改后的代码

HTML代码

CSS代码