reactjs - React - UI 未在移动设备上对齐

我有一个布局,左侧有文本和按钮,右侧有图像。布局在桌面上运行良好,但是当我切换到移动视图时,用户界面会中断。在手机上只显示图像。文本和按钮不存在。我在 UI 中使用 flex。

<div className='container-1'>
     <div className='container-2'>
    <div>
      <h1>heading</h1>
      <p>
      Loren Ipsum
      </p>
     
        <Button>button</Button>
      
      <p>
      lorem ipsum
      </p>
    </div>
    <div>
      <img
        src={homepage}
        width="300"
        height="300"
        alt='home'
       
      />
    </div>
  </div>
</div>

我的 CSS 文件

.container-1 {
position: relative;
background-image: linear-gradient(180deg, #0000FF 0%, #0000FF 70%);
min-height: 100%;
width: 100%;
}

.container-2 {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 10%;
}

回答1

问题是它也使用 display flex 作为移动设备的行。我使用媒体查询将 flex 显示为移动列,并且它有效。谢谢

相似文章

随机推荐

最新文章