gpt4 book ai didi

angular - 从 fxLayoutGap 行的最后一个元素中删除填充

转载 作者:行者123 更新时间:2023-12-04 15:54:57 26 4
gpt4 key购买 nike

我在使用 fxLayoutGap 时遇到问题。我列表的最后一列有一个填充,我不想要它。

如何保留 fxLayoutGap(卡片之间的空间)并移除最后一列的填充?谢谢!

<div fxFlexFill fxLayout="row wrap" fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid" style="margin-right:-20px;">
<div fxHide.lt-sm="true" fxFlex="calc(25%-20px)" fxFlex.md="33">
<div fxFlexFill fxLayoutAlign="center center">
<mat-card (click)="addAdvert()" class="mat-card-add-button">
<div fxLayout="row" fxLayoutAlign="center center" fxFlex="100%">
<span style="font-size:32px;text-align:center">+<br />test</span>
</div>
</mat-card>
</div>
</div>
<div fxFlex="calc(25%-20px)" fxFlex.md="33" *ngFor="let product of products | slice:0:3">
<div style="border:1px solid #ccc" fxFlexFill fxLayoutAlign="center stretch">
<mat-card class="ad">
<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<mat-card-title>test</mat-card-title>
<mat-card-content>
<p>test</p>
</mat-card-content>
<mat-divider [inset]="true"></mat-divider>
<mat-card-actions align="end">
<button mat-icon-button matTooltip="edit" matTooltipShowDelay="800">
<mat-icon>mode_edit</mat-icon>
</button>
<button mat-icon-button matTooltip="delete" matTooltipShowDelay="800">
<mat-icon>delete</mat-icon>
</button>
</mat-card-actions>
</mat-card>
</div>
</div>
</div>

问题(红色):

enter image description here

更新

我使用了 Abdul Rafay 的 解决方案,但这里出现了一个新问题:

enter image description here

最佳答案

只需做这个小技巧。

移除 fxLayoutGap 并为子元素添加边距,并将相同边距的负值添加到父元素。

<div fxLayout="row wrap" style="margin-right: -16px;">
<div fxFlex="calc(50% - 16px)" style="margin-right: 16px;">

</div>
<div fxFlex="calc(50% - 16px)" style="margin-right: 16px;">

</div>
</div>

关于angular - 从 fxLayoutGap 行的最后一个元素中删除填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52168018/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com