在子图像周围换行浮动父div的宽度

Question

出于某种原因，我无法绕过这一个。我有一个正确浮动的div，并且在其中有图像。预期的行为是div将围绕图像包裹其宽度，并一直向右浮动。但是，div的宽度似乎超出了图像，导致它不向右移动。我错过了什么使div包裹图像的宽度？

HTML：

<div class='right'>
    <img src='http://www.clipartpal.com/_thumbs/pd/weather/sun_kicking_blue.png' />
</div>

CSS：

div.right { float: right; }
img { width: 50%; }

示例小提琴：http://jsfiddle.net/3D6Rv/

Answer 1

div比img宽，因为您img宽度为div的{​​{1}}。你也可以float img向右移动到最右边，但是你的左侧仍有过多的空白区域。

我建议将img宽度保持为div，将div向右浮动，然后调整div的宽度。< / p>

像this：

div.right { float: right; width: 25%; }
img { width: 100%; }

Answer 2

将图像的宽度设置为100％，它的高度为auto。然后在包装div上设置固定宽度并填充它。看我更新的小提琴

div.right { float: right;width:300px;background:#ccc;padding:10px;}
img { width: 100%; height:auto; }

http://jsfiddle.net/peter/3D6Rv/1/

Answer 3

或者你可以简单地删除关于图像的CSS 并在html页面中调整它，如下

<div><img src='http://www.clipartpal.com/_thumbs/pd/weather/sun_kicking_blue.png' style="float:right" align=right/>