Div颜色背景错误

Question

我遇到的问题是，当我将浏览器大小更改为平板电脑和移动设备时，我的名字和名称为Jerry和Michelle的推荐书超出了颜色背景，这使我认为它们没有正确嵌套。然而，我看着它，我相信它应该工作，但不知何故它不是。最简单的方法是看到这个，因为我只是将这个代码与我的整个网站隔离开来并没有将它从背景颜色框中推出，如果你将代码片段设为全尺寸并将浏览器放到最小的宽度上。您将在彩色框外看到引号。如果有人能发现问题，让我知道，将不胜感激！谢谢！

#colorbk{
	background-color: #1DA0A3;
}

.container {
     display: flex;
    background-color: #1DA0A3;
    flex-flow: row wrap;
 	max-width:1700px;            
    margin: 0 auto;      
}

#qwrapper {
  display: flex;
  height: 100%;
  width: 100%;
	align-items:center;
	justify-content:center;
	margin:10px;
	background-color:#1DA0A3;
}

.row {
  flex: 0 auto;
  height: 100px;
	margin:0;
 
}

#lighticon{
	padding-bottom:30px;
}

#jerry{
	width:400px;
	
	
}
#michelle{
	width:400px;
	
}


.italic{
font-style:italic;

}

.right{
	float:right;
	
}

@media (max-width: 800px) {
  #qwrapper {
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (max-width:480px) {
  #qwrapper {
    flex-wrap: wrap;
  }
  .row {
    
  }
	
}

@media only screen and (min-width: 760px) {
#qwrapper{
		justify-content: space-around;
		 margin:10px;
	}
  }

<div id="colorbk">

   <div class="container">
<div id="qwrapper">

<h3 id="michelle" class="row" ><div class="italic">"She always thinks of her clients."</div>
<br>
<div class="right" id="connect">-Michelle Houle Conn. FSE</div>
</h3>

<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" class="row" alt="" id="lighticon"/>

<h3 id="jerry" class="row"><div class="italic">"Very smart, creative person, problem solver."</div>
<br>
	<div class="right">-Jerry Nygard C2P</div>

</h3>
</div>
</div>  
 </div>

Answer 1

那是因为你正在修正

的宽度

#jerry {
    width: 400px;
}

#michelle {
    width: 400px;
}

到400px，所以无论你的屏幕尺寸有多大或多小，它都固定为400px。如果你想让它响应你必须使用％。

Answer 2

您可以通过从内部文本中删除width:400px来解决问题：

#jerry{
    /*width:400px;*/
}

#michelle{
    /*width:400px;*/
}

如下面的代码段：

#colorbk{
	background-color: #1DA0A3;
}

.container {
     display: flex;
    background-color: #1DA0A3;
    flex-flow: row wrap;
 	max-width:1700px;            
    margin: 0 auto;      
}

#qwrapper {
  display: flex;
  height: 100%;
  width: 100%;
	align-items:center;
	justify-content:center;
	margin:10px;
	background-color:#1DA0A3;
}

.row {
  flex: 0 auto;
  height: 100px;
	margin:0;
 
}

#lighticon{
	padding-bottom:30px;
}

#jerry{
	/*width:400px;*/
}

#michelle{
	/*width:400px;*/
}


.italic{
font-style:italic;

}

.right{
	float:right;
	
}

@media (max-width: 800px) {
  #qwrapper {
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (max-width:480px) {
  #qwrapper {
    flex-wrap: wrap;
  }
  .row {
    
  }
	
}

@media only screen and (min-width: 760px) {
#qwrapper{
		justify-content: space-around;
		 margin:10px;
	}
  }

<div id="colorbk">

   <div class="container">
<div id="qwrapper">

<h3 id="michelle" class="row" ><div class="italic">"She always thinks of her clients."</div>
<br>
<div class="right" id="connect">-Michelle Houle Conn. FSE</div>
</h3>

<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" class="row" alt="" id="lighticon"/>

<h3 id="jerry" class="row"><div class="italic">"Very smart, creative person, problem solver."</div>
<br>
	<div class="right">-Jerry Nygard C2P</div>

</h3>
</div>
</div>  
 </div>

修改

对于your jsFiddle，我将其修改如下：

jsfiddle.net/81d8trag/2

从height:100px课程中删除.row。同样，最后一个图标设置了该行的大小，我在width:100px css中添加了#lighticon：

.row {
  flex: 0 auto;
  /*height: 100px;*/
    margin:0; 
}

#lighticon{
  width:100px;
  padding-bottom:30px;
}