如何用Tailwind+Styled Components实现两个Div垂直紧密排列？

问题描述 #

• 图片Div与描述Div垂直排列时存在过大间距，父容器已设置flex+flex-direction: column，添加flex:1无效
• 图片Div必须设置height:100vh才能显示图片，固定高度适配性差

相关代码 #

样式组件代码 #

export const CardContainer = styled.div`
  ${tw`
    flex
    flex-col
    justify-center
    items-center
    h-full
  `}

  @media (min-width: 800px) {
    flex-direction: row;
    height: 100vh;
    padding: 200px 30px;
  }
`;

export const CardImage = styled.div`
  ${tw`
    w-10/12
    overflow-hidden
    mt-20
    rounded-t-lg
  `}

  background-image: url("../../../images/image-product-mobile.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 50vh;

  @media (min-width: 800px) {
    display: flex;
    margin-top: 0px;
    border-bottom-left-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0rem;
    min-height: 100vh;
    min-width: 100%;
    background-image: url("../../../images/image-product-desktop.jpg");
  }
`;
export const CardDescriptionContainer = styled.div`
  ${tw`
    w-10/12
    bg-white
    rounded-b-lg
    p-5
  `}

  @media (min-width: 800px) {
    margin-top: 0px;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0rem;
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0rem;
    display: flex;
    flex-direction: column;
    min-height: 50vh;
  }
`;

组件代码 #

export const ProductCard = () => {
  return (
    <CardContainer>
      <CardImage></CardImage>
      <CardDescriptionContainer>
      </CardDescriptionContainer>
    </CardContainer>
  );
};

当前效果 #

目标效果 #

解决方案 #

1. 消除垂直间距 #

• 移除父容器CardContainer中的justify-center：该属性会强制子元素垂直居中，导致间距产生，换成justify-start或直接删除，配合py-8给容器上下加内边距避免内容贴边
• 删除CardImage中的mt-20：这个顶部margin是图片与描述Div之间间距的直接诱因

2. 修复图片固定高度问题 #

• 用**宽高比（aspect ratio）**替代固定vh高度：根据图片比例设置aspect-[2/3]（移动端竖版）和aspect-[3/2]（桌面端横版），自动适配不同屏幕尺寸
• 优化背景图片属性：设置background-size: cover+background-position: center，避免图片拉伸变形
• 修复URL转义问题：把代码中的"替换成普通双引号，确保图片路径解析正确

修改后的完整代码 #

样式组件

export const CardContainer = styled.div`
  ${tw`
    flex
    flex-col
    items-center
    min-h-screen
    py-8
  `}

  @media (min-width: 800px) {
    flex-direction: row;
    min-height: 100vh;
    padding: 0 30px;
    align-items: center;
  }
`;

export const CardImage = styled.div`
  ${tw`
    w-10/12
    overflow-hidden
    rounded-t-lg
    aspect-[2/3]
  `}

  background-image: url("../../../images/image-product-mobile.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  @media (min-width: 800px) {
    border-radius: 0.5rem 0 0 0.5rem;
    aspect-[3/2]
    min-width: 40%;
    background-image: url("../../../images/image-product-desktop.jpg");
  }
`;

export const CardDescriptionContainer = styled.div`
  ${tw`
    w-10/12
    bg-white
    rounded-b-lg
    p-5
  `}

  @media (min-width: 800px) {
    border-radius: 0 0.5rem 0.5rem 0;
    min-height: auto;
    min-width: 40%;
    padding: 2rem;
  }
`;

组件代码（无需修改）

export const ProductCard = () => {
  return (
    <CardContainer>
      <CardImage></CardImage>
      <CardDescriptionContainer>
      </CardDescriptionContainer>
    </CardContainer>
  );
};

修改说明 #

• 父容器用min-h-screen保证占满屏幕高度，py-8控制上下间距，桌面端用align-items: center让水平排列的子元素居中
• 图片容器通过宽高比自动适配高度，无需固定值，背景图片用cover保证完整显示
• 简化了圆角、margin等冗余样式，让代码更整洁

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