css - 同一div中的文本和img对齐问题

Question

<style type="text/css">
    .floatright {
        float: right;
        width: 100px;
        margin: 0 0 10px 10px;
    }
</style>
<div class="floatright">
    <img class="floatright" src="computer.png" alt="" width="100" height="100" /><br />
    Caption here
</div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, </p>

问题：

如果我删除这一行： width: 100px;，文本Caption here将不会与 img 的左边缘对齐，为什么？

Answer 1

因为 float 与元素一起使用，它的宽度被压缩以允许其他项目与之对齐，并且您使用 100px 宽度，图像也是 100px，它不会对齐它下面的标题，但 div 下的段落文本将对齐它并且你的 alos 在 img 之后使用 break 标记，标题文本无法与 img 对齐