Question

我想在一个div中添加两个div，一个在右边，另一个在左边。

<html>
<div>

      <div><button  class="mat-button menu-button">
          <mat-icon color="primary"> remove </mat-icon>
          Add Site
        </button>
      </div>  
      <div *ngIf="showButtons">
          <button>edit</button>
            <button >Save</button>
      </div>
  
  </div>
  </html>

Answer 1

使用float css property对齐div left and right

.left {
  float: left;
}

.right {
  float: right;
}

<div>

  <div class='left'><button class="mat-button menu-button">
          <mat-icon color="primary"> remove </mat-icon>
          Add Site
        </button>
  </div>
  <div *ngIf="showButtons" class='right'>
    <button>edit</button>
    <button>Save</button>
  </div>

</div>

Answer 2

您可以将显示设置为可弯曲，默认方向是row：

<div style="display:flex;">

      <div><button  class="mat-button menu-button">
          <mat-icon color="primary"> remove </mat-icon>
          Add Site
        </button>
      </div>  
      <div *ngIf="showButtons">
          <button>edit</button>
            <button >Save</button>
      </div>
  
  </div>

Answer 3

.firstCol{
float : left;
}

<html>
   <div class="container">
      <div class="row">
          <div class="col-md-12">
              <div class="firstCol"><button  class="mat-button menu-button">
                 <mat-icon color="primary"> remove </mat-icon>
                   Add Site
                  </button>
              </div>  
              <div *ngIf="showButtons">
                 <button>edit</button>
                 <button >Save</button>
              </div>
           </div>
        </div>
    </div>
</html>

Answer 4

对于ng-container，您可以使用div而不是button，一个在右边，另一个在左边。

<div>
    <button class="mat-button menu-button">
        <mat-icon color="primary"> remove </mat-icon>
        Add Site
    </button>
    <ng-container *ngIf="showButtons">
        <button>edit</button>
        <button>Save</button>
    </ng-container>
</div>

Answer 5

您做得很好，只需在div上添加一个类名或Id，就可以使用CSS进行所需的操作，例如float属性。

我想在一个div中添加两个两个div

5 个答案: