內嵌塊縮小圖像

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的試驗。您不必使用空格，只需使用浮動清除。希望你得到它。