兩個IMG不去下一行

Question

http://jsfiddle.net/sV36r/

<div id="a"><div style="max-width: 350px;"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg/691px-Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg" width="100%" /></div></div> 
<div id="b"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg/691px-Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg" style="width: 50px; height: 50px" /></div> 

#a 
{ 
    float: left; 
} 

#b 
{ 
    float: right; 
} 

這裏有兩個圖像，飄然左右。當我縮小寬度時，右邊在左邊 - 我不需要它。相反，左圖像應該縮小。

Answer 1

您可以使用CSS顯示：表做到這一點：看my jsfiddle here

#a 
{ 
    display: table-cell; 
} 

#b 
{ 
    text-align: right; 
    display: table-cell; 
    vertical-align: top; 
} 

#Wrapper 
{ 
    display: table; 
} 

包裝DIV的寬度應在其上設置像我的jsfiddle： -

<div id="Wrapper" style="width:100%"> 
    <div id="a"><div style="max-width: 350px;"> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg/691px-Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg" width="100%" /> 
    </div> 
    <div id="b"> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg/691px-Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg" style="width: 50px; height: 50px" /> 
    </div> 
</div> 

Answer 2

<div id="maincontainer"> 


<div id="a"> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg/691px-Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg" /></div> 
<div id="b"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg/691px-Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg" /></div> 

</div> 


    #maincontainer { 
    width : 600px; 
    height : 100px; 
    border : solid 2px #0f0f0f; 
    } 
    #maincontainer img { 
     width : 280px; 
     height : 80px; 
     margin:0 auto; 
     display:block; 
     background:red; 
    } 

#a 
{ 
    float: left; 
} 

#b 
{ 
    float: right; 
} 

這裏是FIDDLE LINK：http://jsfiddle.net/UuwnC/

更新：http://jsfiddle.net/UuwnC/2/