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 下的段落文本会在 img 之后使用 break 标记与其对齐，你也无法将标题文本与 img 对齐