CSS实现左侧内容对齐导航栏首项、右侧图片占满右侧全宽布局

问题根源 #

现有写法将文本与图片统一放在max-width: 600px的居中容器内，图片受容器宽度限制无法延伸至视口右边缘，同时也无法灵活控制两类元素的对齐规则。

核心实现逻辑 #

不需要将整个内容区嵌套在固定宽度的包裹容器中，只需要单独控制左侧文本的左偏移量，使其与导航栏内容的左起始位置完全匹配；右侧图片直接利用flex弹性布局特性占满剩余全部宽度，自然延伸至视口最右侧。

完整修改代码 #

样式部分 #

// 导航栏包裹容器保持原有逻辑不变，保证导航本身居中限宽
export const NavbarWrapper = styled.div`
  margin-right: auto;
  margin-left: auto;
  max-width: 600px;
  padding-right: 24px;
  padding-left: 24px;
`;

const ContainerStyled = styled.div`
  width: 100%;
  overflow-x: hidden; // 避免内容溢出产生横向滚动条

  .content_container {
    display: flex;
    align-items: flex-start;
    gap: 24px; // 可按需调整文本与图片的间距
  }

  .title {
    // 核心对齐逻辑：左外边距 = 居中导航的左侧空白宽度 + 导航自身左内边距
    margin-left: calc((100vw - 600px) / 2 + 24px);
    flex-shrink: 0; // 防止文本被flex布局压缩
    min-width: fit-content;
  }

  .img {
    flex: 1; // 占满flex容器剩余所有宽度
    width: 100%;
    object-fit: cover;
  }

  // 小屏适配：视口宽度小于导航最大宽度时，直接匹配导航的左内边距即可
  @media (max-width: 600px) {
    .title {
      margin-left: 24px;
    }
  }
`;

结构部分 #

将内容区从固定宽度的NavbarWrapper中移出，导航栏保留原有包裹逻辑：

export default function App() {
  return (
    <ContainerStyled>
      <Navbar />
      <div className="content_container">
        <p className="title">
          This should be responsive to navbar on all sizes
        </p>
        <img className="img" src="/image.jpg" alt="grey bridge" />
      </div>
    </ContainerStyled>
  );
}

效果说明 #

• 视口宽度大于600px时，calc计算出的左外边距与居中导航的内容左边缘完全重合，无论浏览器宽度如何变化，左侧文本始终与导航栏首个项目对齐
• 图片设置flex:1后自动占满剩余宽度，因外层容器为全视口宽度，图片右边缘会自动贴合视口最右侧，实现铺满右侧区域的效果
• 小屏场景下媒体查询自动生效，文本左偏移匹配导航内边距，不会出现布局错位
• 如果后续调整导航栏的max-width或左右内边距值，同步修改calc函数及媒体查询内对应数值即可保持对齐规则一致

内容的提问来源于stack exchange，提问作者Arnas Dičkus