Stapeln Divs nach Bildschirmgröße ändern?

-4

Ich versuche, zwei divs nebeneinander zu haben, Bild links, Informationen rechts, und ich brauche sie zu stapeln (in der Mitte), wenn die Bildschirmgröße kleiner wird.Stapeln Divs nach Bildschirmgröße ändern?

Jedes Mal, wenn ich versuche, es zu beheben, bleiben die Bilder auf beiden Seiten des Bildschirms schweben, so dass sie nicht zentriert sind.

Wie kann ich dies entweder in CSS oder möglicherweise JQuery erreichen?

/* ------------------ team ------------------------------------*/ 
 

 
#team { 
 
    background-color: #0370AD; 
 
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), #0370AD; 
 
    min-height: 115vh; 
 
    width: 100%; 
 
    text-align: center; 
 
    font-family: "Open Sans"; 
 
    letter-spacing: 3px; 
 
    display: inline-block; 
 
} 
 
#team #teamheader { 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 60px; 
 
    padding-top: 30px; 
 
} 
 
#team h2 { 
 
    width: 100%; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
} 
 
#team p { 
 
    color: white; 
 
    height: 20px; 
 
    font-size: 30px; 
 
} 
 
/* ------------------ profile divs ---------------------------*/ 
 

 
.profpics { 
 
    height: 400px; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    padding-top: 100px; 
 
    border: 2px solid black; 
 
} 
 
.team_image { 
 
    height: 300px; 
 
    width: 550px; 
 
    float: left; 
 
    border: 2px solid black; 
 
} 
 
.team_image img { 
 
    height: 300px; 
 
    width: 300px; 
 
    border: 2px solid black; 
 
} 
 
.team_info { 
 
    text-align: center; 
 
    width: 600px; 
 
    height: 60%; 
 
    margin-left: 3%; 
 
    float: right; 
 
    border: 2px solid black; 
 
} 
 
.profpics h1 { 
 
    font-family: Oswald; 
 
    text-align: center; 
 
    width: 100%; 
 
    font-size: 50px; 
 
    letter-spacing: 3px; 
 
    color: white; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    border-top: 4px solid black; 
 
    border-bottom: 4px solid black; 
 
} 
 
.profpics h2 { 
 
    font-size: 35px; 
 
    color: white; 
 
}

<div id="team"> 
 
    <h1 id="teamheader">Our Team</h1> 
 
    <!-- profile divs --> 
 
    <div class="profpics"> 
 
    <div class="team_image"> 
 
     <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg"> 
 
    </div> 
 
    <div class="team_info"> 
 
     <h1>Name</h1> 
 
     <h2>Chief Executive Officer</h2> 
 
     <p>email</p> 
 
    </div> 
 
    </div> 
 
    <div class="profpics"> 
 
    <div class="team_image"> 
 
     <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg"> 
 
    </div> 
 
    <div class="team_info"> 
 
     <h1>Name</h1> 
 
     <h2>Chief Technology Officer</h2> 
 
     <p>email</p> 
 
    </div> 
 
    </div>

Quelle

2016-12-20 Michael Sullivan

Wenn es '* DRINGEND ist *' Ich schlage vor, Sie jemanden zu bezahlen, anstatt zu tun, um Ihre Arbeit. – PeeHaa

Werfen Sie einen Blick auf eine Medienabfrage – Pete

Zeigen Sie einige Screenshots, was genau Sie suchen! – aavrug

Sie benötigen eine Responsive Design-Technik zu verwenden. Das heißt, beginnen Sie mit einem mobilen ersten Layout mit dem Profilbild oben Profilinfo, und fügen Sie dann eine Medienabfrage mit einem Haltepunkt hinzu, der Ihr Layout so ändert, dass Profilbild links ist und Profilinfo rechts in derselben Zeile ist.

Die Art, wie dies getan wird, ist mit 100% Breite auf Ihrem divs für den mobilen kleinen Bildschirm, und ändern Sie dann div Breite und Float mit einer Medienabfrage bei einer höheren Bildschirmgröße. Dies ist klassische CSS responsive Design-Technik. Ich habe ein kurzes Arbeitsbeispiel für Sie erstellt. Es ist nicht perfekt, aber es veranschaulicht die Technik. Der Code zeigt die Medienabfrage und wie ich die Breiten für höhere Bildschirmgrößen geändert habe. Beachten Sie jedoch, dass ich im Allgemeinen% Breiten für Responsive Design bevorzuge, aber ich habe px hier für Sie verwendet.

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Profile Pics for Stackoverflow</title> 
 

 
<style> 
 

 
/* ------------------ team ------------------------------------*/ 
 

 
.clear { clear: both; } /* Apply style to a br and you can clear the columns of floating divs above */ 
 
         /* clear both will clear both left and right floated elements above */ 
 

 

 
#team { 
 
    background-color: #0370AD; 
 
    width: 100%; 
 
    
 
} 
 

 

 
/* ------------------ profile divs ---------------------------*/ 
 

 
.profpics { 
 
    /* Column 1 is a container div over the other two columns */ 
 
    background-color: #99cc33; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
.team_image { 
 
    /* Column 2 left column */ \t 
 
    height: 300px; 
 
    background-color: #D8AE1B; 
 
    /* width: 550px; */ 
 
    width: 100%; 
 
    float: left; 
 
} 
 

 
.team_image img { 
 
    height: 300px; 
 
    width: 300px; 
 
    border: 2px solid black; 
 
} 
 

 
.ImageIsResponsive { 
 
     /*To centre image within div and make it responsive*/ 
 
\t /*max-width means will expand to its full size but no more*/ 
 
\t max-width: 90%; 
 
\t height: auto; 
 
\t /* To centre images within div column */ 
 
\t display: block; 
 
\t margin: auto; 
 
} 
 

 
.team_info { 
 
    /* Column 3 right column */ \t 
 
    background-color: #B8292B; 
 
    text-align: center; 
 
    width: 100%; 
 
    float: left; 
 
} 
 

 
/* MEDIA QUERIES */ 
 
/* for 768px screens or more */ 
 
@media only screen and (min-width: 768px) { 
 

 
.profpics { 
 
\t width: 900px; 
 
} 
 

 
.team_image { 
 
    width: 430px; 
 
} 
 

 
.team_info { 
 
width: 430px; \t 
 
} 
 

 
} 
 

 

 

 
</style> 
 

 

 
</head> 
 

 
<body> 
 

 

 

 
<div id="team"> 
 

 

 
    <h1 id="teamheader">Our Team</h1> 
 
    
 
    
 
    
 
    <!-- profile divs --> 
 
    
 
    <div class="profpics"><!-- Column1 --> 
 
    
 
    <div class="team_image"> 
 
     <img class="ImageIsResponsive" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg"> 
 
    </div> 
 
    
 
    
 
    <div class="team_info"><!-- Column2 --> 
 
     <h1>Name</h1> 
 
     <h2>Chief Executive Officer</h2> 
 
     <p>email</p> 
 
    </div> 
 
    
 
    </div> 
 
    
 
    
 
    
 
    <br class="clear"> 
 
    
 
    
 
    
 
    
 
    <div class="profpics"> 
 
    
 
    <div class="team_image"> 
 
     <img class="ImageIsResponsivesrc="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg"> 
 
    </div> 
 
    
 
    
 
    <div class="team_info"> 
 
     <h1>Name</h1> 
 
     <h2>Chief Technology Officer</h2> 
 
     <p>email</p> 
 
    </div> 
 
    
 
    
 
    </div> 
 
    
 
    <br class="clear"> 
 
    
 
    
 

 

 
</div> <!-- close team --> 
 

 
</body> 
 
</html>

Quelle

2016-12-20 13:56:42 Atrix

Danke !! Arbeitete perfekt –

-1

Hope this helfen Ihnen

 /* ------------------ team ------------------------------------*/ 
 

 
#team { 
 
    background-color: #0370AD; 
 
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), #0370AD; 
 
    min-height: 115vh; 
 
    width: 100%; 
 
    text-align: center; 
 
    font-family: "Open Sans"; 
 
    letter-spacing: 3px; 
 
    display: inline-block; 
 
} 
 
#team *{ 
 
\t box-sizing:border-box; 
 
} 
 
#team #teamheader { 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 60px; 
 
    padding-top: 30px; 
 
} 
 
#team h2 { 
 
    width: 100%; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
} 
 
#team p { 
 
    color: white; 
 
    height: 20px; 
 
    font-size: 30px; 
 
} 
 
/* ------------------ profile divs ---------------------------*/ 
 

 
.profpics { 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border: 2px solid black; 
 
    width: 100%; 
 
    float: left; 
 
    padding:100px 0; 
 
} 
 
.team_image { 
 
    height: 300px; 
 
    width: 40%; 
 
    float: left; 
 
    border: 2px solid black; 
 
} 
 
.team_image img { 
 
    height: 300px; 
 
    width: 300px; 
 
    border: 2px solid black; 
 
} 
 
.team_info { 
 
    text-align: center; 
 
    width: 50%; 
 
    float: right; 
 
    border: 2px solid black; 
 
} 
 
.profpics h1 { 
 
    font-family: Oswald; 
 
    text-align: center; 
 
    width: 100%; 
 
    font-size: 50px; 
 
    letter-spacing: 3px; 
 
    color: white; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    border-top: 4px solid black; 
 
    border-bottom: 4px solid black; 
 
} 
 
.profpics h2 { 
 
    font-size: 35px; 
 
    color: white; 
 
} 
 
@media (max-width: 768px){ 
 
\t .team_image, .team_info{ 
 
\t \t width:100% 
 
\t } 
 
\t .team_image{ 
 
\t \t margin-bottom:30px; 
 
\t } 
 
}

<div id="team"> 
 
    <h1 id="teamheader">Our Team</h1> 
 
    <!-- profile divs --> 
 
    <div class="profpics"> 
 
    <div class="team_image"> 
 
     <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg"> 
 
    </div> 
 
    <div class="team_info"> 
 
     <h1>Name</h1> 
 
     <h2>Chief Executive Officer</h2> 
 
     <p>email</p> 
 
    </div> 
 
    </div> 
 
    <div class="profpics"> 
 
    <div class="team_image"> 
 
     <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg"> 
 
    </div> 
 
    <div class="team_info"> 
 
     <h1>Name</h1> 
 
     <h2>Chief Technology Officer</h2> 
 
     <p>email</p> 
 
    </div> 
 
    </div>

Quelle

2016-12-20 11:05:40

-2

haben Sie die Bootstrap (http://getbootstrap.com/getting-started/) Rahmen betrachtet mit? Mit Bootstrap können Sie das Rastersystem verwenden, um Ihren Inhalt für alle Ansichten leicht anzupassen.

Sie könnten dies tun, dann zum Beispiel:

<div class="container"> 
<div class="row profpics"> 
<div class="col-md-6"> 
<div class="team_image"> 
    <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg"> 
</div> 
</div> 
<div class="col-md-6"> 
<div class="team_info"> 
    <h1>Name</h1> 
    <h2>Chief Executive Officer</h2> 
    <p>email</p> 
</div> 
</div> 
</div> <!-- end row --> 
<div class="row profpics"> 
<div class="col-md-6"> 
<div class="team_image"> 
    <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg"> 
</div> 
</div> 
<div class="col-md-6"> 
<div class="team_info"> 
    <h1>Name</h1> 
    <h2>Chief Executive Officer</h2> 
    <p>email</p> 
</div> 
</div> 
</div> <!-- end row --> 
</div> <!-- end container -->

Quelle

2016-12-20 11:26:17 dhildering

Stapeln Divs nach Bildschirmgröße ändern?

Antwort

Verwandte Themen