1. 首页
  2. 问答
  3. DIV垂直移动窗口调整大小后

DIV垂直移动窗口调整大小后

2017-10-06 69 views
0

如何使这些div当窗口调整大小，并在移动设备上是100％的宽度，以向下移动; Subject class =“project-cards”DIV垂直移动窗口调整大小后

继承人的代码... 调整窗口大小。 这里有很多事情要做，首先当窗口调整大小时，我想让三个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>

来源

2017-10-06 Doc Type

+0

检查这些链接 https://www.w3schools.com/css/css_rwd_viewport.asp， https://www.w3schools.com/css/css_rwd_mediaqueries .asp –

回答

0

尺寸调整功能，您应该使用引导 这很简单，易于使用，并提供您网站的响应速度。

来源

2017-10-06 04:44:28

+0

这是一个专业的网站，我想拥有我赢得的CSS库。 –

+0

然后尝试搜索媒体查询，但引导程序以相同的方式工作并减少代码 –

1

你可以试试这个我已经加入到引导你的代码和你可以相应地定义你的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。

来源

2017-10-06 05:28:16

1

我已经在你的代码一些调整，比如一些div的宽度。你可以四处游玩，看看什么效果最好。

您在project-money h1的width上使用了900%这就是为什么您的overflow-x是如此之多。

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

}

此外，我已经使用media queries，以便当宽度变得更小的含量将低于彼此。阅读w3 queries。

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

代码

 .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; 
 
     }
<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>

来源

2017-10-06 05:31:40 Hash

+0

您处于正确的轨道上。你现在可以看看我的网站，也许给我一个想法，也许溢出-x被扩展到目前为止。换句话说，为什么我能够向左/向右滚动。 Xlaeo.tk –

+0

@DocType是因为你有900％的宽度。 '.project-money h1 {font-size：16.9px; font-size：16.9px; 颜色：灰色; font-weight：bold; 宽度：900％; }' – Hash

+0

我花了45米试图找到错误，感谢兄弟。嗨兄弟，如果你想聘请来帮助这家公司，请与我联系。我会提醒你我16岁。我确实有一个小的Slack团队也可以帮助我。 –

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

来源

2017-10-06 05:38:43 mkarrfan

相关问题

 相关问题