javascript - 在 reactjs 中创建并排 div 和响应式顶部底部 div

Question

我正在使用 ReactJs 来学习构建网站

<div>
      <div className = "Home">
         <div className = "wrapper">
                <div className= "one" > 
                  <img src={image} alt="clock" height = '590px' width='590px'></img>
                 </div>
                <div className="two"> 
                <center>
                   <p>Perfect tool to get your </p>
                   <p> service on <mark className = 'ser'>Word</mark></p>
                   </center>
                   <div className = 'btn_see'>
                     <a href="/" class="button">Explore</a>
                   </div>
                 </div>
          </div>

这是js页面上的代码，这里是div的css代码：

.wrapper { 
    border : 2px solid #000; 
    overflow:hidden;
  }
  
  .wrapper div {
     min-height: 200px;
     padding: 10px;
  }
  .one {
   
    float:left; 
    margin-right:20px;
    width:50%;
    border-right:2px solid #000;
  }
  .two { 
    overflow:hidden;
    margin:10px;
    border:2px dashed #ccc;
    min-height:170px;
  }
  /*mobile*/
  @media screen and (max-width: 800px) {
     #one { 
      float: none;
      margin-right:0;
      width:auto;
      border:0;
    }
  }

在台式机上，它可以按预期工作，但在移动设备上，它应该一个低于另一个，它不会堆叠在一起，这是我的代码有问题。

它应该如何以及如何在桌面上 并排查看 div

它应该如何在移动设备上显示，但不是

响应式顶部底部div

我的代码有问题，请帮助我是新手。

标签： javascripthtmlcssreactjs

Answer 1

有不同的方法可以实现这一点。

 1. Flex Box System
 2. Grid System

提示：你可以用 flex box 来做，当它变成移动版时，所有的块必须在水平方向上。