1

这是正确对齐的图像

我想在同一个 div 中获取图像和文本,我尝试使用 float left 并显示 inline-block 但没有用,我无法在我正在做的地方出错。

我得到的输出如下 这是写代码后的图像我明白了

我在 reactjs 中使用了样式化的组件。这些是我使用的样式组件

export const BannerContainer = styled.div`
    width: 1280px
    height: 448px
    margin: auto
    `

导出常量 BannerImageContainer = styled.div height:448px width:640px float: left 导出常量 BannerImage = styled.img padding:96px 96px 96px 96px margin-left:128px

出口 const BannerTextContainer = styled.div height:448px width:512px margin-right:128px float: left

导出常量 BannerHeaderText = styled.h1 width: 352px height: 64px padding-top:40px font-family: Nunito font-size: 28px font-weight: 600 line-height: 1.14 text-align: center

出口 const BannerParagraphContainer = styled.p width: 389px height: 72px opacity: 0.38 font-family: Nunito font-size: 16px line-height: 1.5 text-align: center color: #000000

出口 const SeeAllProductsButton = styled.button width: 160px height: 32px background-color: #7C6ECC color: #FFFFFF border: 0px margin: 32px 112px

这是渲染它的代码 <BannerContainer> <BannerImageContainer> <BannerImage src={bannerImage} /> </BannerImageContainer> <BannerTextContainer> <BannerHeaderText> Solving the most common problems in marketing </BannerHeaderText> <BannerParagraphContainer> Exquisite codially mr happiness of neglected distrusts. Boisterous impossible unaffected he me everything. </BannerParagraphContainer> <SeeAllProductsButton>See All Products</SeeAllProductsButton> </BannerTextContainer> </BannerContainer>

4

1 回答 1

1

尝试使用 FlexBox!

非常简单的实现让你开始:

<div style={{display: 'flex'}}>
   <div style={{flex: '1'}}>
      <BannerImageContainer>
          <BannerImage src={bannerImage} />
      </BannerImageContainer>
   </div>
   <div style={{flex: '1'}}>
      <BannerTextContainer>
          <BannerHeaderText>
              Solving the most common problems in marketing
          </BannerHeaderText>
          <BannerParagraphContainer>
             Exquisite codially mr happiness of neglected distrusts.
             Boisterous impossible unaffected he me everything.
          </BannerParagraphContainer>
          <SeeAllProductsButton>See All Products</SeeAllProductsButton>
      </BannerTextContainer>
   </div>
</div>

只是为了添加更多信息,这是一个非常流行的 css 组件(不是特定于 React),用于正确对齐事物。谷歌搜索'flexbox'会给你很多信息,但是一些特定的链接在这里这里

于 2017-05-24T04:36:56.723 回答