1. 首頁
  2. 問答
  3. DIV垂直移動窗口調整大小後

DIV垂直移動窗口調整大小後

2017-10-06 107 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

相關問題

 相關問題