并排对齐div - 有角度

Question

我一直试图在我的面板中并排调整我的回复或数据，但这对我有用。我能做错什么？我知道这是非常基本但我是初学者。我希望淡蓝色的div能够像奶油色的div一样对齐。请帮忙

<div class="container">

<div *ngFor="let client of Clients">

    //light blue

    <div *ngIf="currentChat.user_email==client.from" class="pull-right well well-sm" style="background-color:mintcream;">

  {{client.line_text}} 
   <small class="text-muted">{{client.from}} | {{client.created_at}}</small>




        </div>


//creamish
<div *ngIf="currentChat.client_email==client.from" class="well well-sm" style="width:40%; background-color:antiquewhite">

    {{client.line_text}} 
   <small class="text-muted">{{client.from}} | {{client.created_at}}</small>






    </div>
</div>
</div>

Answer 1

因为你正在使用pull-right我假设你正在使用你正在使用bootstrap， 你问题是拉右类让它向右浮动所以它开始侧向堆叠

我建议使用bootstrap的网格系统制作2列并将div堆叠在那里a.e。

像这样：

<div class="row">
  <div class="col-xs-6">
     <!-- Textbox -->
     <div class="well well-sm" style="background-color:mintcream">
      Text Here
    </div>
    <!-- Textbox -->
     <div class="well well-sm" style="background-color:mintcream">
      Text Here
    </div>
  </div>
  <div class="col-xs-6">
   <!-- Textbox -->
    <div class="well well-sm" style="background-color:antiquewhite">
      Text Here
    </div>
    <!-- Textbox -->
    <div class="well well-sm" style="background-color:antiquewhite">
      Text Here
    </div>
  </div>
</div>

https://jsfiddle.net/xb9Ljxrv/

所以你将两个部分分成两个偶数列并填充它们而不是浮动到右边

为您提供这样的输出