html - 如何给div正确对齐

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


项目清单

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

.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>

最佳答案

<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，我建议您使用它而不是使用内联样式。

关于html - 如何给div正确对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53424793/