Align the first div on the same height with the second div, the first div should be placed closest to the left and the second closeste to the right

huangapple go评论72阅读模式
英文:

Align the first div on the same height with the second div, the first div should be placed closest to the left and the second closeste to the right

问题

<div class="p-grid p-dir-col">

    <div class="p-col">

        <div class="p-grid p-justify-between">

            测试

        </div>

    </div>

</div>
**<div class="container">**

<div *ngIf="searchLaunched" class="left-div" style="padding: 0.5em; font-size: 1.25em;">

    {{ totalElements }} 个元素<span *ngIf="totalElements > 1">个</span> 找到<span *ngIf="totalElements > 1">个</span>

</div>

<div *ngIf="canCreate" class="p-grid p-justify-end p-nogutter btn-table-crud-top" style="margin-top: 0.5em;">

    <p-button (click)="addUser()" label="创建用户" title="{{ tooltips.creer }}"></p-button>

</div>

</div>
</div>

</div>
<p-table>
测试
</p-table>
英文:

In the container div I need to have the two sub divs placed at the same height. The first div (Total elements) should be anchored closest to the left of the page and the second div (The button) closest to the right.

<div class="p-grid p-dir-col">

    <div class="p-col">

        <div class="p-grid p-justify-between">

            Test

        </div>

    </div>

</div>
**<div class="container">**

<div *ngIf="searchLaunched" class="left-div" style="padding: 0.5em; font-size: 1.25em;">

    {{ totalElements }} élément<span *ngIf="totalElements > 1">s</span> trouvé<span *ngIf="totalElements > 1">s</span>

</div>

<div *ngIf="canCreate" class="p-grid p-justify-end p-nogutter btn-table-crud-top" style="margin-top: 0.5em;">

    <p-button (click)="addUser()" label="Créer utilisateur" title="{{ tooltips.creer }}"></p-button>

</div>

</div>
</div>

</div>
<p-table>
Test
</p-table>

答案1

得分: 0

使用 Flexbox 并设置 justify-content: space-between

div.container {
  display: flex;
  justify-content: space-between;
}
<div class="container">
  <div>
    totalElements
  </div>
  <div>
    <button>create user</button>
  </div>
</div>
英文:

Use Flexbox with justify-content: space-between

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div.container {
  display: flex;
  justify-content: space-between;
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;

  &lt;div&gt;
    totalElements
  &lt;/div&gt;

  &lt;div&gt;
    &lt;button&gt;create user&lt;/button&gt;
  &lt;/div&gt;

&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月26日 13:12:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/76553672.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定