Угловая проблема выравнивания HTML-элементов

Question

Я пытаюсь выровнять нижнюю картинкусправа от стола.Я знаю, что мне здесь не хватает небольшой обстановки, но, похоже, не могу ее найти.Внизу кода это элемент saleForMonth, который я хочу выровнять по правому краю.

   <mat-sidenav-container>
    <mat-sidenav-content style="height:99vh;">
        <div style="float:left; margin:22px 0px 0px 32px;">
            <div style="text-align:center;">
            </div>
            <button mat-raised-button type="button" style="background-color:#3378a8;color:WHITE;height:45px;" (click)="sidenavOpen('sale',sidenav)">
                <b>SALE</b>
            </button>
            <button mat-raised-button type="button" style="background-color:#3378a8;color:WHITE;height:45px;margin-left:2px;" (click)="sidenavOpen('upgrade',sidenav)">
                <b>UPGRADE</b>
            </button>
            <div style="margin-top:53px">
                <div>
                    <salesByPackage></salesByPackage>
                </div>
                <div style="margin-top:240px;">
                    <salesByCampaign></salesByCampaign>
                </div>
            </div>
        </div>
        <div class="container" style="margin-top:20px;float:right">
                <div class="col-lg-9">
                  <mat-tab-group #tab mat-stretch-tabs (selectedTabChange)="onTabClick($event)">
                      <mat-tab label="SALES">
                          <orders></orders>
                      </mat-tab>
                      <mat-tab label="UPGRADES">
                          <upgrades></upgrades>
                      </mat-tab>
                  </mat-tab-group>
              </div>
              <!-- Change to this -->
              <div class="col-lg-3">
                  <div>
                      <salesForMonth></salesForMonth>
                  </div>
              </div>
              </div>
    </mat-sidenav-content>

Answer 1

    <div class="container col-lg-9" style="margin-top:20px;float:right">
        <mat-tab-group #tab mat-stretch-tabs (selectedTabChange)="onTabClick($event)">
            <mat-tab label="SALES">
                <orders></orders>
            </mat-tab>
            <mat-tab label="UPGRADES">
                <upgrades></upgrades>
            </mat-tab>
        </mat-tab-group>
    </div>
    <!-- Change to this -->
    <div class="container col-lg-3">
        <div>
            <salesForMonth></salesForMonth>
        </div>
    </div>

поместите эти 2 блока в container и разделите их на col-lg-9 и col-lg-3

Answer 2

<div class="row" style="float:right">
  <div class="col-lg-3">
    <salesForMonth></salesForMonth>
  </div>
</div>

Или вы можете использовать пустой div с левой стороны и установить его с помощью col-lg-9

<div class="row">
  <div class="col-lg-9">

  </div>
  <div class="col-lg-3">
    abc
  </div>
</div>

Answer 3

Если ваш компонент salesForMonth не имеет полной ширины, попробуйте этот CSS -

    <div style='width:100%; float:right'>
        <salesForMonth></salesForMonth>
    </div>

, иначе просто поместите float:right на ваш элемент.