flex布局如何将统计模块置于主文章下方及设置图片混合模式

核心问题修复方案 #

1. 统计模块布局异常修复 #

你代码存在两处核心布局错误：

• 桌面端.card设置为display:flex后，它的三个直接子元素（图片容器、文本容器、统计容器）默认横向排列，因此统计模块不会出现在文章下方，而是挤在文本容器右侧
• 媒体查询中给.stats_container设置了display: inline，行内元素无法正常生效宽高、内外边距等布局属性

调整步骤：

• 将stats_container整个DOM节点移动到text-container内部，和h1、article平级
• 给.text-container添加display: flex、flex-direction: column、padding: 0 4rem、justify-content: center、gap: 2rem属性，让内部元素纵向排列并留合适间距
• 媒体查询中将.stats_container的display: inline改为display: flex，添加justify-content: space-between属性，让三个统计项横向均匀分布

2. 图片混合效果匹配修复 #

当前混合模式设置不符合预期，按以下调整即可匹配参考效果：

• 给.image_container添加背景属性background-color: hsl(277, 64%, 61%)
• 将.image的mix-blend-mode从soft-light改为multiply，同时添加opacity: 0.75属性调整透明度

3. 其他冗余属性修正 #

• 桌面端.image_container的宽度不要设置为1040px，改为width: 50%即可，占卡片一半宽度
• 移除调试用的.text-container红色边框、.stats_container黄色边框属性
• 修正text-align: flex-start为text-align: left，flex-start是flex布局对齐属性，不能用于text-align

修正后核心CSS片段（媒体查询部分） #

@media only screen and (min-width: 1224px) {
  .card {
    display: flex;
    width: 1040px;
    height: 450px;
    align-self: center;
  }
  .image_container {
    order: 2;
    width: 50%;
    height: 100%;
    background-color: hsl(277, 64%, 61%);
  }
  .image {
    width: 100%;
    height: 100%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0px;
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
  .text-container {
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: 0 4rem;
  }
  h1,
  article {
    text-align: left;
    padding: 0;
  }
  .stats_container {
    display: flex;
    justify-content: space-between;
    text-align: left;
  }
  .num1 {
    color: white;
    font-family: "Lexend Deca", sans-serif;
    font-weight: 400;
    font-size: 22px;
    display: block;
    padding: 0;
  }
}

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