窗口调整大小后，Div垂直移动

Question

当窗口调整大小时，如何使这些div向下移动，在移动设备上，这些div的宽度为100％; 主题类=“项目卡”

继承守则...... 调整窗口大小。 这里发生了很多事情，首先当窗口调整大小时，我希望三个div向下移动到垂直行。当窗口大约达到移动电话的大小时，我希望三个div仍然是垂直的，宽度为100％;这样它就可以明智地覆盖整个页面宽度。调整大小时，你可以看到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%;
    }
}

DEMO：https://codepen.io/mkarrfan/pen/WEOWpG

Answer 2

你可以尝试这个我已经为你的代码添加了bootstrap，你可以相应地定义你的CSS 首先将bootstrap CDN添加到您的代码中，并使用您想要的列大小定义每个部分我已将col-sm-4添加到类中。
 注意： sm 适用于小屏幕同样我们有 md，xs，lg 适用于中小型超大屏幕，您可以定义所有内容同时也取决于您希望视图在不同尺寸的屏幕上显示的方式，您可以将屏幕分为12个部分，因此范围将从col-sm-1到col-sm-12。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

        <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" >
       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">
<div class="projectholders row">
     <div class="projects-cards col-sm-4">
             <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 col-sm-4">
               <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 col-sm-4">
                 <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>
</div>
</body>
</html>  

你可以找到工作小提琴https://jsfiddle.net/rhmasm3t/
我希望这将有所帮助。这不会改变你的css。

Answer 3

我对您的代码进行了一些调整，例如某些div的宽度。你可以四处游玩，看看最有效的方法。

您在900%的{​​{1}}使用了width，这就是为什么project-money h1太多了。

overflow-x

此外，我使用了media queries，因此当宽度变小时，内容将低于彼此。阅读w3 queries。

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

}

<强>代码

＆＃13;

＆＃13;

@media screen and (max-width:500px) {
  .projectholders {
    flex-direction: column;
  }

＆＃13;

      .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: inline-flex;
      justify-content: center;
      margin-bottom: 100px;
      min-width: 200px;
    }
    
    .projects-cards {
      border: .9px solid #f7f7f7;
      border-radius: 2rem;
      display: block;
      width: 150px;
      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: 150px;
      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: 125px;
      background-color: #ff0043;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      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;
    }
    
    @media screen and (max-width:500px) {
      .projectholders {
        flex-direction: column;
      }

＆＃13;

＆＃13;

＆＃13;

Answer 4

对于调整大小功能，您应该使用bootstrap 它简单易用，可为您的网站提供响应。