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

【问题标题】：I want add two two div's in a single div我想在一个 div 中添加两个两个 div
【发布时间】：2019-03-29 15:05:30
【问题描述】：

我想在一个 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>

【问题讨论】：

<div style='display:flex;flex-direction:row;'><div>div1</div><div>div2</div></div>

标签： html css angular angular6

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以设置显示为 flex，默认方向是 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>

【讨论】：

【解决方案3】：

你做得很好，只需在 div 上添加一个类名或一个 Id，你就可以用 CSS 做你想做的事情，例如 float 属性。

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

使用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>

【讨论】：