时间戳

首页 > 解决方案 > 如何为 div 提供正确的对齐方式

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

问题描述

这是我的代码，我需要显示一个页面，其中包含 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>

标签： htmlcss

解决方案

<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，我会推荐使用它而不是提供内联样式。

推荐阅读