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 display：table来执行此操作：请参阅my jsfiddle here

#a
{
    display: table-cell;
}

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

#Wrapper
{
    display: table;
}

Wrapper 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/

两个相邻的图像漂浮不下一行

2 个答案: