React组件图片响应式布局：大屏居右，移动端置底实现

我制作了一个About Us页面，希望页面中的图片在大屏设备上显示于页面右侧空白区域，在手机端查看时自动移至页面底部。尝试给父级div设置flex布局但未达到预期效果，寻求解决方案。

当前代码 #

aboutUS.js #

import './AboutUs.css'
import TeamCard from '../../components/TeamCard'

export default function AboutUs() {
  const members = [
    { name: 'Bhavesh', link: 'https://developer.mozilla.org/en-US/', imageLink: 'https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg' },
    { name: 'Bhavesh', link: 'https://developer.mozilla.org/en-US/', imageLink: 'https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg' }    
  ]

  return (
    <div className='about-us-div'>
      <div className='content'>
        <h1 style={{ marginBottom: '30px' }}>About Us</h1>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?</p>
      </div>
      <div className="cc-cards">
      {members.map((member, index) => <TeamCard key={index} name={member.name} link={member.link} imageLink={member.imageLink} />)}
      </div>
      <img className='logo-image' src="https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg" alt="" />
    </div>
  )
}

AboutUs.css #

.about-us-div{
    color: white;
}
.content {
  max-width: 600px;
  margin: 30px 80px 60px;
}
.cc-cards{
    display: flex;
    flex-wrap: wrap;
    margin-left: 60px;
    margin-top: -20px;
}

@media(max-width: 710px){
    .cc-cards{
        justify-content: center;
        padding-bottom: 30px;
    }
}

解决方案 #

通过调整DOM结构和Flex布局属性，实现响应式效果：

1. 修改JSX结构 #

将文本内容和团队卡片包裹在同一容器中，作为页面左侧区域，与右侧图片形成明确的Flex项：

import './AboutUs.css'
import TeamCard from '../../components/TeamCard'

export default function AboutUs() {
  const members = [
    { name: 'Bhavesh', link: 'https://developer.mozilla.org/en-US/', imageLink: 'https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg' },
    { name: 'Bhavesh', link: 'https://developer.mozilla.org/en-US/', imageLink: 'https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg' }    
  ]

  return (
    <div className='about-us-div'>
      {/* 左侧内容区 */}
      <div className='left-content'>
        <div className='content'>
          <h1 style={{ marginBottom: '30px' }}>About Us</h1>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?</p>
        </div>
        <div className="cc-cards">
          {members.map((member, index) => <TeamCard key={index} name={member.name} link={member.link} imageLink={member.imageLink} />)}
        </div>
      </div>
      {/* 右侧图片 */}
      <img className='logo-image' src="https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg" alt="Mountains" />
    </div>
  )
}

2. 更新CSS样式 #

利用Flex布局实现大屏横向排列、移动端纵向排列，并调整间距和适配：

.about-us-div{
    color: white;
    display: flex;
    gap: 2rem; /* 左右内容间距 */
    padding: 0 2rem;
    align-items: flex-start; /* 顶部对齐 */
}

/* 左侧内容区占据剩余空间 */
.left-content {
    flex: 1;
}

.content {
  max-width: 600px;
  margin: 30px 0 60px;
}

.cc-cards{
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-top: -20px;
}

.logo-image {
    max-width: 340px;
    height: auto;
}

@media(max-width: 710px){
    .about-us-div {
        flex-direction: column; /* 移动端切换为纵向排列 */
    }
    .cc-cards{
        justify-content: center;
        padding-bottom: 30px;
    }
    .logo-image {
        width: 100%; /* 图片铺满容器 */
        margin-top: 2rem; /* 与上方内容拉开间距 */
    }
}

效果说明 #

• 大屏设备：左侧文本和卡片占据主要空间，图片固定宽度显示在右侧空白区域，顶部与左侧内容对齐
• 移动端设备：布局切换为纵向排列，图片自动移至页面底部并铺满屏幕宽度，卡片居中显示

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