html - 窗口大小调整后div垂直移动

Question

如何使这些 div 在窗口大小调整时向下移动，并在移动设备上使宽度为 100%； 主题类别=“元素卡”

代码如下... 调整窗口大小。 这里发生了很多事情，首先当窗口大小调整时，我希望三个 div 向下移动到垂直行中。当窗口达到手机大小时，我希望三个 div 仍然垂直，宽度为 100%；这样它就覆盖了整个页面的宽度。当 div 调整大小时，您会发现 div 内的内容出现很多问题。例如，文本和按钮重叠。我知道我不能问两个问题，但如果你能帮助我让三个 div 做出响应，那将对我有很大帮助。访问网站Xlaeo.tk

.mainCenter{
    width:100%;
    
    padding-right:100px;
    padding-left:100px;
    padding-top: 50px;
    height:700px;
}

.project-wrapper{
    margin-top: 420px;
}
.headerProjects{
    font-size: 25px;
font-weight: BOLD;
margin-left: 52px;
margin-bottom: 20px;
color: #d80068;
}


.projectholders{
    height:auto;
    width:100%;
  margin:0 auto;
  display: flex;
  justify-content: center;
  margin-bottom: 100px;
 

  
  
    min-width: 200px;
}
.projects-cards{
  border:.9px solid #f7f7f7;
    border-radius: 2rem;
display: block;
 width: 30%;
 margin-left:25px;
}
.projects-cards:hover{
       box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
         transition-delay: 1s;
            transition-duration: .5s;
}
.media-top{
    width:100%;
    height:300px;
border-bottom: 1.9px solid gray;
position: relative;
    
} 

.media-top img{
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
}

.project-info{
    width:100%;

}
.progress-left{
float: left;
width: 150px;
height: 150px;

}
.project-money{
   float: right;
width: 170px;
border-bottom: 1px solid #c7c8c9;

}
.project-money h1{
 font-size: 16.9px;
color: gray;
font-weight: bold;
width:900%;

}
.visitProject-button-H{
padding: 20px;
float:right;


}

.visi-project{
    height:50px;
   width:135px;
    background-color: #ff0043;
    font-size: 20px;
    font-weight: bold;
    border:none;
   border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}



.under{
    display: flex;
    margin:0 auto;
    justify-content: center;
    font-size: 60px;
   color: #ff0043;

}

 <div class="projectholders">
     <div class="projects-cards">
             <div class="media-top" >
                
                <img src="http://cdn.pcwallart.com/images/mercedes-benz-biome-seed-wallpaper-1.jpg" width="100%" height="100%" />
             
             </div>
             <div class="project-info">
                 <div class="progress-left">
                     <img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
                     width="100%" height="100%;" />
                       
                 </div>
                  <div class="project-money">
                     <h1>Backed by $102,323 </h1>
                 </div>
                  <div class="visitProject-button-H">
                    <button class="visi-project" type="button">Visit</button>
                 </div>
             </div>
        </div>
   
     <div class="projects-cards">
               <div class="media-top">
                <img src="https://cdn.dribbble.com/users/149817/screenshots/1436337/speedcam.gif" width="100%" height="100%" />
        
             </div>
               <div class="project-info">
                 <div class="progress-left">
                     <img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
                     width="100%" height="100%;" />
                  
                 </div>
                  <div class="project-money">
                     <h1>Backed by $9,564 </h1>
                 </div>
                  <div class="visitProject-button-H">
                    <button class="visi-project" type="button">Visit</button>
                 </div>
             </div>
        </div>
         <div class="projects-cards">
                 <div class="media-top">
                <img src="http://coolwallpaperz.info/user-content/uploads/wall/o/27/girl-motorcycle-streamlined-cool-sumer-370761.jpg" width="100%" height="100%" />
                
             </div>
               <div class="project-info">
                 <div class="progress-left">
                     <img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
                     width="100%" height="100%;" />
                 </div>
                 <div class="project-money">
                     <h1>Backed by $23,324 </h1>
                 </div>
                  <div class="visitProject-button-H">
                    <button class="visi-project" type="button">Visit</button>
                 </div>
             </div>
        </div>
        </div>

Answer 1

如果你真的不想使用任何库， 请使用CSS媒体查询

<div>
  <div class="block">
    <p>Hello</p>
  </div>
    <div class="block">
    <p>Hello</p>
  </div>
    <div class="block">
    <p>Hello</p>
  </div>
<div>

CSS

.block{
  display: inline-block;
  width: 30%;
}

@media screen and (max-width: 480px) {
    .block{
      display: inline-block;
      width: 100%;
    }
}

演示:https://codepen.io/mkarrfan/pen/WEOWpG