屏幕调整大小后堆叠Div？

时间：2016-12-20 10:41:51

标签： jquery html css web

我正试图让两个div彼此相邻，左边的图片，右边的信息，当屏幕尺寸变小时我需要它们堆叠（在中间）。

每当我尝试修复它时，图像都会浮动到屏幕的任一侧，因此它们不会居中。

如何在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>

3 个答案:

答案 0 :(得分：0)

您需要使用响应式设计技术。这意味着从移动设备第一个布局开始，配置文件信息显示在配置文件信息之上，然后添加带有断点的媒体查询，这会更改您的布局，因此配置文件图片位于左侧，配置文件信息位于同一行的右侧。

这样做的方法是在移动小屏幕的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 */	
  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*/ 
	   /*max-width means will expand to its full size but no more*/
	   max-width: 90%;
	   height: auto;
	   /* To centre images within div column */
	   display: block;
	   margin: auto;
}

.team_info {
  /* Column 3 right column */	
  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 {
	width: 900px;
}

.team_image {
  width: 430px;
}

.team_info {
width: 430px;	
}

}



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

答案 1 :(得分：-1)

希望这能帮到你

＆＃13;
＆＃13; 
      /* ------------------ 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 *{
	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){
	.team_image, .team_info{
		width:100%
	}
	.team_image{
		margin-bottom:30px;
	}
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：-2)

您是否考虑过使用Bootstrap（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 -->
相关问题
最新问题