html - 如何为 div 提供正确的对齐方式

Question

这是我的代码，我需要显示一个包含 3 张图片的页面，一张在左边，另外两张在右边，但是所有图片都显示在同一行，它们没有按照我的顺序显示

1. 列表项

   已经给了。请帮助我解决这些问题。

.leftAlign {
    float: left;
}
.rightAlign {
    float: right;
    margin: 10px;
}
.rightOrder{
    float: right;
    margin: 10px;
}
.primary-button {
    background-color: #109bd5;
    color: white;
  }

<div class="about-content">
  <h4 mat-dialog-title>Hello World</h4>
    <div mat-dialog-content>
      <div class='leftAlign'>
        <h4>IMAGE1</h4>
        <img src="assets/images/image1.png">
      </div>
      <div class='rightAlign'>
        <h4>IMAGE2</h4>
        <img src="assets/images/image2.png">
      </div>
      <div class='rightOrder'>
        <h4>ICON</h4>
        <img src="assets/images/icon_img.png">
      </div>
    </div>
    <div mat-dialog-actions align="end">
      <button mat-button mat-dialog-close class="mat-button               primary-button">close
      </button>
    </div>
</div>

Answer 1

<div style="display:flex;justify-content:space-between;">
          <div>
            <!-- This will be left aligned -->
            <img src="https://via.placeholder.com/150?text=1" alt="image 1">
          </div>
          <div>
            <!-- This will be right aligned -->
           <div>
             <img src="https://via.placeholder.com/150?text=2" alt="image 2">
           </div>
           <div>
             <img src="https://via.placeholder.com/150?text=3" alt="image 3">
           </div>
          </div>
        </div>

请看看这个，如果你使用的是 Bootstrap，我会推荐使用它而不是提供内联样式。