求助：图片无法右对齐，尝试多种CSS属性仍未解决

问题根源 #

• text-align: right; 需作用在块级容器上，直接加在图片上无效——图片默认是inline-block元素，仅会继承父容器的对齐规则。
• margin: right; 属于语法错误，正确写法是margin-right: [值]，但该属性仅设置元素右侧外边距，无法实现右对齐，需用margin-left: auto推动元素靠右。
• 图片大小波动是因为未限制最大宽度，且未设置height: auto维持比例，导致图片随容器或内容随意拉伸/收缩。

可行解决方法 #

方法1：容器级文本对齐（适合图文混排）

给图片的父容器设置对齐规则，同时限制图片大小避免波动：

.img-wrapper {
  text-align: right;
}
.img-wrapper img {
  max-width: 300px; /* 按需调整最大宽度 */
  height: auto; /* 保持图片比例 */
}

对应HTML结构：

<div class="img-wrapper">
  <img src="你的图片地址" alt="图片描述">
</div>

方法2：块级元素margin自动对齐（适合独立图片）

将图片设为块级元素，利用margin-left: auto实现右对齐：

.right-img {
  display: block;
  margin-left: auto;
  margin-right: 0; /* 可选，强制贴合容器右侧 */
  max-width: 300px;
  height: auto;
}

HTML用法：

<img class="right-img" src="你的图片地址" alt="图片描述">

方法3：浮动对齐（适合文字环绕场景）

需给父元素添加清除浮动样式，避免布局错乱：

.float-right-img {
  float: right;
  margin-left: 1rem; /* 与左侧文字留间距 */
  max-width: 300px;
  height: auto;
}
/* 清除浮动通用类 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

HTML结构：

<div class="clearfix">
  <img class="float-right-img" src="你的图片地址" alt="图片描述">
  <p>这里是需要环绕图片的文本内容...</p>
</div>

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