Div vertikal verschieben nach Fenstergröße ändern

Wie mache ich diese divs nach unten verschieben, wenn Fenster die Größe ändert und auf mobilen Geräten eine Breite von 100%; Betreff Klasse = "Projektkarten"Div vertikal verschieben nach Fenstergröße ändern

Heres der Code ... Fenstergröße ändern. Theres viele Dinge hier passiert, erst wenn das Fenster die Größe ändert ich möchte die drei divs in eine vertikale Reihe bewegen. Wenn das Fenster ungefähr die Größe eines Mobiltelefons erreicht, möchte ich, dass die drei Divs immer noch vertikal mit einer Breite von 100% sind; so dass es die gesamte Seitenbreite abdeckt. Sie können sehen, dass viele Dinge mit dem Inhalt in den divs falsch laufen, wenn die Größe geändert wird. Zum Beispiel überlappen sich der Text und die Schaltfläche. Ich weiß, dass ich nicht zwei Fragen stellen kann, aber wenn Sie mir helfen könnten, die drei divs zu bekommen, um zu reagieren, hilft mir das so sehr. Besuchen Sie Website 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>

Quelle

2017-10-06 Doc Type

Check diese Links https://www.w3schools.com/css/css_rwd_viewport.asp, https://www.w3schools.com/css/css_rwd_mediaqueries .asp –

Für die Redimensionierung Funktionalität sollten Sie Bootstrap Es ist einfach und leicht zu bedienen und Ansprechbarkeit auf Ihre Website.

Quelle

2017-10-06 04:44:28

Dies wird eine professionelle Website sein, ich möchte meine gewonnene CSS-Bibliothek haben. –

dann versuchen, nach Medienabfrage zu suchen, jedoch funktioniert Bootstrap auf die gleiche Weise und reduziert die Codes –

Sie können dies versuchen Ich habe Bootstrap zu Ihrem Code hinzugefügt und Sie können Ihre CSS entsprechend definieren.
Zuerst fügen Sie Bootstrap CDN zu Ihrem Code und definieren Sie jeden Abschnitt mit der gewünschten Spaltengröße, die ich Col-sm-4 zur Klasse hinzugefügt habe.
Hinweis:sm ist für kleinen Bildschirm ähnlich haben wir md, xs, lg für mittleren extra kleinen und großen Bildschirm, können Sie auch alle zur gleichen Zeit festlegen können je nachdem, wie Sie die Ansicht auf anders aussehen wollen Größe des Bildschirms, können Sie Bildschirm in 12 Teile aufteilen, so wird Bereich von col-sm-1 bis col-sm-12 sein.

<!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>

können Sie die Arbeits Geige https://jsfiddle.net/rhmasm3t/
Ich hoffe finden, das wird helfen. und das ändert nichts an deinem CSS.

Quelle

2017-10-06 05:28:16

Ich habe einige Anpassungen in Ihrem Code vorgenommen, z. B. die Breite einiger Divs. Sie können herumspielen und sehen, was am besten funktioniert.

Sie haben 900% auf width von project-money h1 das ist verwendet, warum Ihr overflow-x so viel.

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

}

Auch habe ich media queries verwendet, so dass, wenn die Breite der Inhalt untereinander kleiner wird sein wird. Lesen Sie w3 queries.

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

-Code

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

Quelle

2017-10-06 05:31:40 Hash

Sie sind auf dem richtigen Weg. Könntest du jetzt meine Seite anschauen und mir vielleicht eine Idee von vielleicht dem Overflow-X geben, so weit ausgedehnt. Mit anderen Worten, warum kann ich nach links/rechts scrollen. Xlaeo.tk –

@DocType das ist, weil Sie 900% Breite haben. '.project-money h1 { Schriftgröße: 16.9px; Farbe: grau; Schriftgewicht: fett; Breite: 900%; } ' – Hash

Ich verbrachte wie 45m versucht, den Fehler zu finden, danke bro. Hey Bruder, wenn du jemals eingestellt werden willst, um mit dieser Firma zu helfen, kontaktiere mich bitte. Ich werde dich warnen, ich bin 16. Ich habe eine kleine Slack-Gruppe, die mir auch helfen wird. –

Wenn Sie wirklich alle Bibliotheken nicht verwenden möchten, Bitte gehen Sie mit CSS Medien Abfrage

<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

Quelle

2017-10-06 05:38:43 mkarrfan

Div vertikal verschieben nach Fenstergröße ändern

Antwort

Verwandte Themen