如何将两个反应元件并排放置？

Question

我要左边的图片和右边的描述。由于其组件，说明自动低于图像。

--这是我想要的图像右边的描述

function MidPageDescWebDesign({ FirstH3, SecondH3, Title }) {
  return (
    <div className='Desc'>
      <div className='Desc__Container'>
        <div className='Desc__Text'>
          <div className='Desc__Title'>
            <h2 className='title' >{Title}</h2> 
          </div>

          <h3>{FirstH3}</h3>

          <h3>{SecondH3}</h3>
        </div>
      </div>
    </div>
  )
}
    
export default MidPageDescWebDesign

描述的CSS

.Desc {
  display: block; 
}
    
.Desc__Container {
  display: flex; 
  width: 50%;
  height: 70%;
  float: right;
} 

这是我想要的左边的图像

function DesignImage({ MobileType, TabletType }) {
  return (
    <div>
      <div className='Tablet'>
        <img className='TabletImg' src={`/images/tablet-${TabletType}-design.jpg`} alt=""/>
      </div>
    
      <div className='Mobile'>
        <img className='MobileImg' src={`/images/mobile-${MobileType}-design.jpg`} alt=""/>
      </div>
    </div>
  )
}
    
export default DesignImage

左边图像的CSS

@media (min-width: 600px) {
  .TabletImg {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
    
  .MobileImg {
    display: none;
  }
    
  .Tablet {
    display: inline;
    margin-bottom: -15em;
  }
}

JSX组件道具

function MobileWebDesign() {
  return (
    <div>
      <Navbar />

      <BodyWebDesign />

      <MidPageWebDesign image='/images/image-express.jpg' />

      <MidPageDescWebDesign FirstH3='A multi-carrier shipping website for' SecondH3='ecommerce businesses' Title='Express'/>

      <MidPageWebDesign image='/images/image-transfer.jpg' />

      <MidPageDescWebDesign FirstH3='Site for low-cost money transfers and ' SecondH3='sending money within seconds' Title='Transfer'/>

      <MidPageWebDesign image='/images/image-Photon.jpg' />

      <MidPageDescWebDesign FirstH3=' A state-of-the-art music player with' SecondH3='high-resolution audio and DSP effects' Title='Photon'/>

      <MidPageWebDesign image='/images/image-Builder.jpg' />

      <MidPageDescWebDesign FirstH3='Connects users with local contractors' SecondH3='based on their location' Title='Builder'/>

      <MidPageWebDesign image='/images/image-Blogr.jpg' />

      <MidPageDescWebDesign FirstH3='Blogr is a platform for creating an' SecondH3='online blog or publication' Title='Blogr'/>

      <MidPageWebDesign image='/images/image-Camp.jpg' />

      <MidPageDescWebDesign FirstH3='Get expert training in coding, data,' SecondH3='design, and digital marketing' Title='Camp'/>

      <AboveFooter />

      <Footer /> 
    </div>
  )
}

Answer 1

您可以将两个元素封装在类似div的容器中，并以容器的样式指定flex方向"row“。它将把所有子元素都放在一行中。

Answer 2

最简单但又丑陋的解决办法可以是这样。

将您的每一对描述和图像包装如下

<div style={{display:"grid",  gridTemplateColumns:"1fr 1fr"}}>
      <MidPageWebDesign image='/images/image-express.jpg' />
      <MidPageDescWebDesign  FirstH3='A multi-carrier shipping website for' SecondH3='ecommerce businesses' Title='Express'/>
<div/>