如何在Styled Components中实现两个元素并排布局？

问题根源分析 #

你的代码存在几个导致图片无法按预期缩小的核心问题：

1. Container 使用 position: absolute 脱离文档流，挤压右侧图片容器的布局空间
2. DoubleR 同时混用 Grid 布局与 float: right，两种布局机制冲突导致宽度控制失效
3. 图片内联样式可能被父容器默认样式覆盖，且缺少明确的尺寸限制逻辑

方案一：Flex 布局重构（推荐） #

用 Flex 实现简洁的左右分栏，彻底解决布局冲突，同时明确控制图片尺寸：

修改后的组件代码 #

<FeaturesGalleryWrapper>
  <Double>
    <AccordionSection>
      <Container>
        {AccordationDate.map((data, index) => {
          return (
            <>
              <Wrap onClick={() => toggle(index)}>
                <h1 style={{ fontSize: "16px" }}>{data.title}</h1>
              </Wrap>
              {clicked === index ? (
                <Dropdown>
                  <p style={{ fontSize: "14px" }}>{data.description}</p>
                </Dropdown>
              ) : null}
            </>
          );
        })}
      </Container>
    </AccordionSection>
  </Double>
  <DoubleR>
    {AccordationDate.map((data, index) => {
      return (
        <>{clicked === index ? <FeatureImage src={data.imageUrl} /> : null}</>
      );
    })}
  </DoubleR>
</FeaturesGalleryWrapper>

修改后的样式代码 #

const FeaturesGalleryWrapper = styled.div`
  display: flex;
  gap: 15px;
  align-items: flex-start; /* 保持左右栏顶部对齐 */
`;

const Double = styled.div`
  flex: 1; /* 左侧栏占满剩余空间 */
  background-color: red; /* 移除多余引号，styled-components 无需字符串包裹属性值 */
`;

const DoubleR = styled.div`
  width: 120px; /* 固定右侧容器宽度 */
  display: flex;
  justify-content: center; /* 图片水平居中 */
`;

// 新增图片专属样式组件，明确控制尺寸
const FeatureImage = styled.img`
  width: 100px;
  height: 200px;
  object-fit: cover; /* 可选：保持图片比例，避免拉伸变形 */
`;

const AccordionSection = styled.div`
  background: #fff;
`;

const Container = styled.div`
  box-shadow: 2px 10px 35px 1px rgba(153, 153, 153, 0.3);
  /* 移除 position: absolute，让容器回归文档流 */
`;

// 以下原有样式保持不变
const Wrap = styled.div`
  background: #272727;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: center;
  cursor: pointer;
  h1 {
    padding: 2rem;
    font-size: 16px;
  }
  span {
    margin-right: 1.5rem;
  }
`;

const Dropdown = styled.div`
  background: #1c1c1c;
  color: #00ffb9;
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #00ffb9;
  border-top: 1px solid #00ffb9;
  p {
    font-size: 14px;
  }
`;

关键修改点 #

• 移除 Container 的绝对定位，让左侧布局正常占据空间
• 用 Flex 替代冲突的 Grid + Float 布局，明确左右栏的宽度分配逻辑
• 用 Styled Components 定义图片样式，替代内联样式避免优先级问题，同时可选添加 object-fit 保持图片比例
• 修正列表项的 key 位置（移至最外层 Fragment），符合 React 列表渲染规范

方案二：修复原有 Grid 布局 #

如果坚持使用 Grid，只需调整以下几点即可解决问题：

1. 移除 DoubleR 的 float: right（Grid 布局无需浮动）
2. 给 DoubleR 添加固定宽度与居中对齐逻辑
3. 移除 Container 的绝对定位
4. 用 FeatureImage 组件控制图片尺寸

示例 Grid 样式修改 #

const FeaturesGalleryWrapper = styled.div`
  display: grid;
  grid-template-columns: 1fr 120px; /* 直接指定右侧列宽，避免均分 */
  grid-gap: 15px;
`;

const DoubleR = styled.div`
  display: flex;
  justify-content: center;
`;

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