Html 将图像正确定位在卡上

我必须在右侧实现图像，但即使将float设置为右侧，其位置也不会改变

<mat-card>
      <mat-card-title class="report-title" data-toggle="collapse" data-target="#Mul2">
        <div class="col-sm-4">
          <p class="image1" [innerHTML]="jsonDataTempX.image"></p>
        </div>
        <p class="report-titles" style="margin-top: -3%;" data-toggle="collapse" data-target="#Mul2">
          {{jsonDataTempX.description}} <i class="fa fa-caret-down" style="color: black"></i>
          <span class="percentage-align12" >
          {{jsonDataTempX.range_percentage | number:0}}%</span>
        </p>
      </mat-card-title>
      <mat-card-content id="Mul2" class="collapse">
        <p class="collapse-message"  [innerHTML]="jsonDataTempX.summary_message"></p>
      </mat-card-content>
    </mat-card>

这就是我得到的

你需要看起来像这样

---

您只需在图像标签前面添加img标签即可：

.image1 img{
  float: right;
  margin: 0 100%;
}

.image1 img{
  float: right;
  margin: 0 100%;
}