在HTML中如何实现图片对齐到右上角？

你当前使用的align原生属性已经是HTML5废弃属性，仅能控制水平对齐，无法实现垂直方向的顶部对齐需求，推荐用CSS实现，以下是3种常见适用场景的方案：

方案1：绝对定位（适合图片悬浮在右上角、不挤占其他内容布局的场景） #

• 首先给图片的父容器添加position: relative;样式
• 给图片添加绝对定位样式，固定到右上角位置
  完整代码示例：

<!-- 父容器必须加相对定位，否则图片会相对于整个页面右上角对齐 -->
<div style="position: relative; min-height: 100px;">
  <img src="star.png" alt="Gold" style="position: absolute; top: 0; right: 0;">
  <!-- 其他内容可正常写在这里，图片会悬浮在容器右上角不影响普通流布局 -->
</div>

方案2：Flex布局（适合图片和其他内容在同一容器内正常排布、不需要悬浮的场景） #

给父容器添加Flex布局样式，直接控制内容的对齐规则：

<div style="display: flex; justify-content: flex-end; align-items: flex-start; min-height: 100px;">
  <img src="star.png" alt="Gold">
  <!-- 如果左侧需要放其他内容，加一个带flex: 1属性的div即可占满剩余宽度 -->
</div>

方案3：浮动+margin调整（老旧项目兼容场景） #

如果需要兼容非常老版本的浏览器，可以在你现有代码基础上调整上边距实现，不优先推荐：

<img src="star.png" alt="Gold" align="right" style="margin-top: -20px;">
<!-- 上边距的数值根据你实际页面的布局需求调整即可 -->

提示：生产环境优先使用前两种方案，兼容性和可维护性更强

内容的提问来源于stack exchange，提问作者nebula234