div颜色背景错误

Question

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

#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

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

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

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

如下sn-p：

#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

从.row 类中删除height:100px。同样，由于最后一个图标已使用该行类设置其大小，我将 width:100px 添加到 #lighticon css 中：

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

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

Answer 2

那是因为你要固定

的宽度

#jerry {
    width: 400px;
}

#michelle {
    width: 400px;
}

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