Responsive design 内联块收缩图像

我试着让我的直列积木收缩而不是包装。图像的排列方式如下：

AAA BBB

中交

当窗口达到C的宽度时，我希望所有的图像一起缩小。现在我得到的是C收缩，B在A下包裹。如果我在父分区A和B中设置空白：nowrap不包裹，但也不收缩。这是我的密码：

<div id="container">
<div class="small_pic"><img a></div>
<div class="small_pic"><img b></div>
<div class="large_pic"><img c></div>
</div>

#container {
margin-left:auto;
margin-right:auto;
width: 486px;
max-width:100%;
}
.small_pic {
width:220px;
max-width:100%;
display:inline-block;
height:auto;
}
.large_pic {

width:480px;
max-width:100%;
display:inline-block;
height:auto;
}

#容器{
左边距：自动；
右边距：自动；
宽度：486px；
最大宽度：100%；
}
.小型图片{
宽度：220px；
最大宽度：100%；
显示：内联块；
高度：自动；
}
.大型图片{
宽度：480px；
最大宽度：100%；
显示：内联块；
高度：自动；
}

---

谢谢

对于.small_pic使用相对宽度，而不是绝对宽度-将220px更改为45%，您应该会很好。

我正在检查您的代码。你们遗漏了一件事，那个就是元素的宽度应该是em或%而不是px。 顺便说一下，我正在试验你的代码

<div id="container">
<div class="small_pic">
  <img src="My_Bad_by_PhunkyVenom.jpg" class="firstImg">
  <img src="My_Bad_by_PhunkyVenom.jpg" class="secondImg">
</div>
<div class="large_pic"><img src="My_Bad_by_PhunkyVenom.jpg"></div>
</div>


#container {
margin-left:auto;
margin-right:auto;
width: 50%;
/*max-width:100%;
*/}
.small_pic {
/*width:220px;*/        // You've used pixels
max-width:100%;
display:inline-block;
height:auto;
clear:both;
}
.firstImg,.secondImg{width:50%;float:left;}
.large_pic img{
/*width:480px;*/        //You've used pixels.
width:100%;
display:inline-block;
min-height:100px;
height: 30%;
}

#容器{
左边距：自动；
右边距：自动；
宽度：50%；
/*最大宽度：100%；
*/}
.小型图片{
/*宽度：220px；*///您已经使用了像素
最大宽度：100%；
显示：内联块；
高度：自动；
明确：两者皆有；
}
.firstImg、.secondImg{width:50%；float:left；}
.大型图片图片{
/*宽度：480px；*///您已经使用了像素。
宽度：100%；
显示：内联块；
最小高度：100px；
身高：30%；
}

---

您可以使用em（例如：300px~18.75px）。您不必使用空白，只需使用浮动清除。希望你能理解。

你能用真实的图像来复制这个问题吗？