如何在flex容器中将图片定位到右侧？响应式布局代码问题排查

云上老周

2026-10-2

问题原因&修复方案

核心错误点

你为.image_container设置了flex-direction、justify-content等Flex布局专属属性，但没有给该容器添加display: flex声明，Flex属性只有容器被指定为Flex布局时才会生效
桌面端.card仍为默认块级布局，子元素会垂直堆叠，你设置的.image_container宽度和卡片宽度一致，既挤占了后续文本、统计模块的空间，也不符合左右分栏的设计预期
缺少桌面端文本、统计模块的适配样式，就算图片挪到右侧，其余内容布局也会错乱

修复代码

将你现有CSS中的@media部分替换为以下代码即可实现需求：

@media only screen and (min-width: 1224px) {
  .card {
    width: 1040px;
    height: 450px;
    /* 开启flex布局，row-reverse直接实现图片在右、文本在左的排布 */
    display: flex;
    flex-direction: row-reverse;
  }
  .image_container {
    border: 1px red solid;
    width: 50%;
    height: 100%;
    /* 开启flex布局让justify-content生效 */
    display: flex;
    justify-content: flex-end;
  }
  .image {
    width: 100%;
    height: 100%;
    /* 适配桌面端图片圆角，只保留右侧两个圆角 */
    border-radius: 0 10px 10px 0;
    mix-blend-mode: soft-light;
  }
  /* 适配左侧文本、统计模块布局 */
  .card > div:not(.image_container) {
    width: 50%;
    box-sizing: border-box;
    padding: 0 40px;
  }
  .text-container {
    text-align: left;
    padding-top: 50px;
  }
  .stats_container {
    display: flex;
    justify-content: space-between;
    text-align: left;
    padding: 0 55px 50px;
  }
}