角度HTML元素对齐问题

我正试图将底部的图片与桌子的右侧对齐。我知道我错过了这里的一个小场景，但似乎找不到。在底部代码中，我想将Saleformon元素与右侧对齐

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

出售
升级

如果您的组件

salesForMonth

不是全宽的，请尝试此CSS-

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

否则只需在元素上放置

float:right

。

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

将这两个块放入

容器中

，并将它们划分为

col-lg-9

和

col-lg-3

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

abc

您是否尝试过

style=“float:right”

？在divYes上，我已经做了，它不起作用。你能在stackblitz上复制它吗？我有这么复杂的设置，这会有点困难。通过放置浮动：这样我就可以将它带到桌子的右侧底部。哦，你是说你想让它调整桌子的右侧而不是右下方，我是对的？是的，这就是我的目标。我用上面的设置上传了第三张照片。它改变了整个世界setup@Sumchans你确定？因为我们只对最后两个街区做了改动。。但您的图像也会在“显示”和“升级”选项卡上显示更改。。你能展示一下你所做的改变吗？谢谢大家的参与。