画面サイズ変更後のDivsの積み上げ？

-4

私はお互いに隣り合った2つのdiv、左側の画像、右側の情報を持っています。画面サイズが小さくなると（中央に）スタックする必要があります。画面サイズ変更後のDivsの積み上げ？

私はそれを修正しようとするたびに、画像は画面の両側に浮いているため、中央に配置されません。

CSSまたはJQueryでこれをどのように達成できますか？

/* ------------------ 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>

出典

2016-12-20 Michael Sullivan

それが 'URGENT * *'私はあなたの代わりに自分の仕事をするために誰かを支払うことを示唆しています。 – PeeHaa

メディアのクエリを見てください – Pete

あなたは何を探していますか？ – aavrug

あなたが反応する設計手法を使用する必要があります。これは、プロファイル情報の上にプロファイルpicを持つモバイルの最初のレイアウトから始まり、ブレークポイントを持つメディアクエリを追加し、レイアウトを変更してプロファイルピクチャが左側になり、プロファイル情報が同じ行の右側にあることを意味します。

モバイルスモールスクリーンのdivで100％の幅を使用してから、divの幅を変更してより高い画面サイズのメディアクエリで浮動させることです。これは古典的なCSSレスポンスデザイン手法です。私はあなたのための細かい作業例を作成しました。それは完璧ではありませんが、技術を説明しています。このコードは、メディアクエリと、より高い画面サイズの幅をどのように変更したかを示しています。しかし、一般的にはレスポンシブデザインに％widthsを使用することをお勧めしますが、ここではpxを使用しています。

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

出典

2016-12-20 13:56:42 Atrix

ありがとうございました！完璧に働いた –

-1

・ホープ、このヘルプあなた

 /* ------------------ 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>

出典

2016-12-20 11:05:40

-2

あなたがブートストラップ（http://getbootstrap.com/getting-started/）フレームワークを使用して考えがありますか？ブートストラップを使用すると、グリッドシステムを使用して、すべてのビューに対してコンテンツを簡単に整列させることができます。

あなたは、例えば、次にこれを行うことができます：

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

出典

2016-12-20 11:26:17 dhildering

画面サイズ変更後のDivsの積み上げ？

答えて

関連する問題