【发布时间】：2020-01-22 07:32:18
【问题描述】：
我正在使用列表中的 mat-card，但对齐有问题
问题是当一个mat card里面的内容变大时，下一个mat card应该自动调整空间，不会留下之前更大空间mat-card对应的空格
我附上对应的css和html代码：
.works {
padding-left: 47px;
padding-top: 99px;
// display: inline-flex;
}
.work-head {
// width: 330px;
// height: 28px;
font-family: Raleway-SemiBold;
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 28px;
// text-align: center;
color: #000000;
}
.work-list {
// width: 123px;
// height: 28px;
padding-left: 0px;
text-align: right;
padding-top: 23px;
font-family: Raleway-Medium;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 28px;
// text-align: center;
color: #000000;
}
.work-list1 {
// width: 123px;
// height: 28px;
text-align: right;
padding-top: 23px;
font-family: Raleway-Medium;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 28px;
// text-align: center;
padding-left: 49px;
color: #000000;
}
.work-detail {
// width: 159px;
// height: 28px;
padding-left: 0px;
text-align: left;
padding-top: 23px;
font-family: Raleway;
font-style: normal;
font-weight: 300;
font-size: 24px;
line-height: 28px;
// text-align: center;
color: #000000;
}
.flexfix {
flex-basis: 0;
}
.work-card {
// margin-right: 26px;
margin-bottom: 26px;
padding-top: 39px;
padding-left: 17px;
padding-bottom: 49px;
padding-right: 10px;
width: 506px;
// height: 244px;
background: #FFFFFF;
border: 1px solid #E5E5E5;
box-sizing: border-box;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
}
.card-margin{
margin-left: 3%;
}<div class="works">
<div fxLayout="row layout-wrap">
<div *ngFor="let item of listOfProjects" class="card-margin">
<mat-card class="work-card">
<mat-card-title class="work-head">{{item.name}}</mat-card-title>
<img class="line-align" src="assets/icons/DashBoard/work-card-line.svg" />
<mat-card-content>
<div *ngIf="item.name==='test10'">
<div fxLayout="row" fxLayoutGap="20px">
<div class="work-list">Contractor:</div>
<div class="work-detail">{{item.baseEntityByContractor.entityName}}</div>
</div>
<div fxLayout="row" fxLayoutGap="20px">
<div class="work-list">Contractor:</div>
<div class="work-detail">{{item.baseEntityByContractor.entityName}}</div>
</div>
</div>
<div fxLayout="row" fxLayoutGap="20px">
<div class="work-list">Contractor:</div>
<div class="work-detail">{{item.baseEntityByContractor.entityName}}</div>
</div>
<div fxLayout="row" fxLayoutGap="20px">
<div class="work-list1">Status:</div>
<div class="work-detail">{{item.projectStatus.name}}</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>【问题讨论】：
-
您可以简单地通过放置一个覆盖行类并将其拆分为 6:6 来解决这个问题，然后在每个 6:6 col-div 内附加另一行，在其中您可以添加完整width divs 以避免空白问题。
-
@Jishnuvp 你能详细说明一下这个解决方案吗
-
兄弟，我在下面添加了一个 sn-p，并用 bootstrap 4 和 HTML 进行了详细说明
标签： html css angular layout angular-material