フロートは左または表示インラインブロックは、スタイル付きのコンポーネントで動作していない

Question

は私がフロート左と表示インラインブロックを使用してみましたが同じdiv要素ではなく不使用のIの画像とテキストを取得したいreactjs私がやっている間違いを犯すことはできません。

私はreactjsでスタイルのコンポーネントを使用

を次のように私は、出力を取得しています。 これらは私が

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

輸出のconst BannerImageContainer = styled.div height:448px width:640px float: left 輸出のconst BannerImage = styled.img padding:96px 96px 96px 96px margin-left:128px

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

輸出を使用しているスタイルのコンポーネントですconst 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

export const BannerParag raphContainer = styled.p SeeAllProductsButton = styled.button width: 160px height: 32px background-color: #7C6ECC color: #FFFFFF border: 0px margin: 32px 112px

width: 389px height: 72px opacity: 0.38 font-family: Nunito font-size: 16px line-height: 1.5 text-align: center color: #000000

輸出constがこれは <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>

Answer 1

それをレンダリングするためのコードであるフレキシボックスを使用してみてください！あなたが軌道に乗るために

非常に単純な実装：

<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コンポーネントです。ちょうどグーグル 'フレックスボックス'は、あなたに多くの情報を提供しますが、いくつかの特定のリンクはhereとhere