内嵌块缩小图像

Question

我试图让我的内嵌块缩小而不是缠绕。图像被布置是这样的：

AAA BBB

CCCCCC

作为窗口获取要我想要的所有图像的收缩一起C的宽度。现在我得到的是C缩小和B包装在A下。如果我设置空白：在父DIV A和B中不包装，但也不缩小。这里是我的代码：

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

谢谢！

Answer 1

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

Answer 2

我正在浏览您的代码。你错过的一件事是元素的宽度应该在em或者％而不是px中。 （：300像素〜18.75px如） 顺便说我是你的代码

<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%; 
} 

您可以使用EM的试验。您不必使用空格，只需使用浮动清除。希望你得到它。