英文:
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 -->
<div class="container">
<div>
totalElements
</div>
<div>
<button>create user</button>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论