对齐卡片的内容(图像，文本和按钮) [英] Align mat-cards content (image, text and buttons)

问题描述

我正在使用列表中的席卡，但对齐方式有问题.

I'm working with mat-card in a list and I have a problem with the alignment.

这是我拥有的:

这就是我想要的:

代码:

<div class="margin-top-20" fxFlexFill fxLayout="row wrap" fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="15px grid">
  <div fxFlex="20" fxFlex.md="33" *ngFor="let advert of adverts; let i = index" class="padding-fix">

    <div fxFlexFill fxLayoutAlign="center stretch">
      <mat-card class="ad">
        <div fxLayoutAlign="space-between center">
          <img mat-card-image src="test" alt="test">
        </div>
        <mat-card-title>test</mat-card-title>
        <mat-card-content>
          <p>
            test
          </p>
        </mat-card-content>

        <mat-card-actions align="end">
        </mat-card-actions>
      </mat-card>
    </div>
  </div>
</div>

我不知道可以将图像居中(必要时调整其大小).

I didn't understand I can I center the image (resize it if necessary).

:感谢coreuter的回答，我已经快要得到我想要的东西了.

EDIT : Thank to coreuter's answer, i'm close to get what I want.

第一个区块的高度与其他区块的高度不同.而且每行的末尾都有一些空白(我希望每行5个元素).

the first block is not as the same height than the others. And I've got some blank space at the end of each rows (I would like 5 elements per row).

更新后的代码:

<div class="margin-top-20" fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="15px">

                            <mat-card fxFlex="20" (click)="addProduct()" class="mat-card-add-button">
                                <div>
                                    <span style="font-size:32px;text-align:center">+<br />Add product</span>
                                </div>
                            </mat-card>

                            <mat-card fxFlex="20" *ngFor="let product of products; let i = index" class="product">
                                <img class="image" mat-card-image src="{{product.picture.uri}}" alt="photo">
                                <mat-card-title>{{product.name}}</mat-card-title>
                                <mat-card-content>
                                    <p>
                                        test
                                    </p>
                                </mat-card-content>
                                <mat-card-actions align="end">

                                </mat-card-actions>
                            </mat-card>
                        </div>

我认为这几乎是完美的.我在mat-card-content div中尝试了很多内容，但我不知道它是否很好.这是我所拥有的屏幕截图:

I think it's almost perfect. I tried with a big content inside the mat-card-content div and I don't know if it's good. Here a screenshot of what I have :

您认为可以将按钮的高度设置得比大垫子卡片(最后一个)高吗?另一件事，我看不到每行第一个元素的左边框.

Do you think it possible to get the buttons at the same height than the big mat-card (the last one) ? Another thing, I can't see the border-left of the first element of each rows.

这里是更新的代码:

<div class="margin-top-20" fxFlexFill fxLayout="row wrap" fxLayoutAlign="start start" fxLayoutGap="20px">

                            <mat-card fxLayoutAlign="center center" fxFlex="0 1 calc(20% - 20px)" (click)="addProduct()" class="product" style="height:413px">
                                <div>
                                    <span fxLayoutAlign="center center" style="font-size:32px;text-align:center">+<br />Add product</span>
                                </div>
                            </mat-card>

                            <mat-card fxFlexFill fxFlex="0 1 calc(20% - 20px)" *ngFor="let product of products; let i = index" class="product">
                                <img class="image" mat-card-image src="{{product.picture.uri}}" alt="photo">
                                <mat-card-title>{{product.name}}</mat-card-title>
                                <mat-card-content>
                                    <p *ngIf="i == 3">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus, leo id pulvinar vestibulum, ligula nisl tincidunt magna, eu volutpat leo neque quis justo. Fusce semper ante id mi porta porta. Pellentesque nec pretium purus. Curabitur lobortis tempus consectetur. Nam ullamcorper gravida erat sed suscipit. Morbi quis porttitor nunc. Suspendisse lacinia a turpis vitae laoreet. Aliquam pellentesque scelerisque urna. Cras vulputate nisi sed elit commodo cursus. Aenean interdum, erat at convallis dictum, urna enim tincidunt nisi, vitae tempor nisi nisi a tellus. Aliquam volutpat dui eget gravida eleifend. Nullam pulvinar justo eget tellus commodo, eget molestie dui convallis. Curabitur at fermentum lorem. Maecenas porttitor sem ut enim efficitur bibendum et vel metus.
                                    </p>
                                    <p *ngIf="i != 3">
                                           test
                                    </p>
                                </mat-card-content>
                                <mat-card-actions align="end">
                                    <button mat-icon-button>
                                        <mat-icon>mode_edit</mat-icon>
                                    </button>

                                    <button mat-icon-button>
                                        <mat-icon>delete</mat-icon>
                                    </button>
                                </mat-card-actions>
                            </mat-card>
                        </div>

再次感谢您的帮助，非常感谢！

Thank you again for your help, I really appreciate !

编辑3 :此版本有效！！！非常感谢coreuter！ ( https://stackblitz.com/edit/angular-xprafs )

EDIT 3 : This version works !!! Thank you very much coreuter ! (https://stackblitz.com/edit/angular-xprafs)

mat-card-content不能通过"fxFlex"属性来固定.内容在垫卡之外. (它正在进行最后一次堆栈闪电攻击，但对我而言不行).

The mat-card-content is not fixed by the "fxFlex" property. The content goes outside the mat-card. (It's working on the last stackblitz but not for me).

 <div *ngIf="products.length > 0" style="margin-left:10px;">
                        <div fxLayout="row wrap" fxLayoutAlign="start stretch" fxLayoutGap="20px">

                            <mat-card fxLayoutAlign="center center" fxFlex="0 1 calc(20% - 20px)" fxFlex.md="0 1 calc(25% - 20px)" fxFlex.sm="0 1 calc(33% - 20px)" fxHide.xs="true" (click)="addProduct()" class="product mat-card-add-button">
                                <div fxLayoutAlign="center center" style="font-size:32px;text-align:center">+<br />Add product</div>
                            </mat-card>

                            <mat-card fxLayout="column" fxFlex.md="0 1 calc(25% - 20px)" fxFlex="0 1 calc(20% - 20px)" fxFlex.sm="0 1 calc(33% - 20px)" fxFlex.xs="100" *ngFor="let product of products; let i = index" class="product">
                                <img mat-card-image src="{{product.picture.uri}}" alt="photo">
                                <mat-card-title>{{product.name}}</mat-card-title>
                                <mat-card-content fxFlex>
                                        <p *ngIf="i == 3">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus, leo id pulvinar vestibulum, ligula nisl tincidunt
                                            magna, eu volutpat leo neque quis justo. Fusce semper ante id mi porta porta. Pellentesque nec pretium purus. Curabitur
                                            lobortis tempus consectetur. Nam ullamcorper gravida erat sed suscipit. Morbi quis porttitor nunc. Suspendisse lacinia
                                            a turpis vitae laoreet. Aliquam pellentesque scelerisque urna. Cras vulputate nisi sed elit commodo cursus. Aenean interdum,
                                            erat at convallis dictum, urna enim tincidunt nisi, vitae tempor nisi nisi a tellus. Aliquam volutpat dui eget gravida
                                            eleifend. Nullam pulvinar justo eget tellus commodo, eget molestie dui convallis. Curabitur at fermentum lorem. Maecenas
                                            porttitor sem ut enim efficitur bibendum et vel metus.
                                        </p>
                                        <p *ngIf="i != 3">
                                            test
                                        </p>
                                </mat-card-content>
                                <mat-card-actions fxFlexAlign="end" align="end">
                                    <button mat-icon-button>
                                        <mat-icon>mode_edit</mat-icon>
                                    </button>

                                    <button mat-icon-button>
                                        <mat-icon>delete</mat-icon>
                                    </button>
                                </mat-card-actions>
                            </mat-card>
                        </div>
                    </div>

css:

.mat-card {
    padding: 18px !important; // less padding than per default
}

.mat-card-image {
    width: calc(100% + 36px) !important; // update padding
    margin: 0 -24px 16px -18px !important; // update padding
}

.mat-tab-label {
    font-size: 16px !important;
}

.mat-card-title {
    font-size:24px !important;
    font-weight: 500 !important;
}

.mat-card-content {
    font-size: 14px !important;
    min-height: 30px; // <--- to remove !!!
}

.product {
    margin-bottom: 25px;
    /*min-width: 180px;
    text-align: center;*/
} 

/* desktop button */
.mat-card-add-button {
    border: 1px dashed grey;
    box-shadow:none !important;
    cursor:pointer;
}

.product img {
    height: 250px;
    object-fit: contain;
}

推荐答案

由于我回答了您之前的 SO问题，会根据我先前的答案来建立我对这个问题的答案.请参阅此更新的 Stackblitz ，其中包含不同宽度和高度的图像.

Since I answered your previous SO question, I'll build my answer to this question upon my previous answer. Please refer to this updated Stackblitz with images of different width and height.

编辑:调整了答案/堆叠闪电，使一行包含5个元素.

EDIT: Adjusted the answer/stackblitz to make a row containing 5 elements.

为了使图像始终保持相同的高度，我在<img> -tag中添加了"image"类(当然，您可以使用.product img{...}直接将css应用于img -tag，如下所示:好).

In order to keep the image always the same height I've added the class "image" to the <img>-tag (you can of course apply the css to the img-tag directly with .product img{...} as well).

<img class="image" mat-card-image src="{{product.picture.url}}" alt="photo">

并应用了以下CSS:

.image{
  height: 150px; /* adjust as needed */
  object-fit: contain;
}

使用object-fit: contain，您的图像将始终正确缩放并在可用区域内完全可见.

With object-fit: contain your image will always properly scaled and fully visible within the available area.

请记住，以下浏览器仅完全支持 .

Keep in mind that object-fit is currently only fully supported by the following browsers.

为了在每行中获得5个元素，您必须使用fxFlex属性调整fxLayoutGap和每个元素的宽度计算.请按如下所示更改您的代码.

In order to get 5 Elements within each row you have to adjust the fxLayoutGap and the calculation of the width for each element using the fxFlex attribute. Please change your code as follows..

<div class="container" fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="20px">

    <!-- Add addProduct-button outside loop -->
    <mat-card fxFlex="0 1 calc(20% - 20px)" (click)="addProduct()" class="product">
     ...
    </mat-card>

        <!-- loop over the products -->
    <mat-card fxFlex="0 1 calc(20% - 20px)" *ngFor="let product of products; let i = index" class="product">
      ...
    </mat-card>

</div>

..并将fxLayoutGap上设置的20px和fxFlex内的20px更改为所需值.

.. and change the 20px set on the fxLayoutGap and the within the calculation of fxFlex to your desired value.

现在设置了这些值后，您必须应用一个最小宽度值，否则所有元素的宽度都将变小，并且行将不换行:

With those values now set you have to apply a min-width value, otherwise all elements will just get smaller in width and the row won't wrap:

.product{
  min-width: 180px; /* adjust as desired */
  min-height: 250px;
  margin-bottom: 20px; /* same as fxLayoutGap for even distribution */
}

编辑2

要使第一个元素与其他元素的高度相同，必须将.product CSS类的(min-)height调整为等于最高产品的高度.

EDIT 2

To make the first element the same height as the others you have to adjust to (min-)height of the .product CSS-class to be equal to the height of the highest product.

由于您尚未标记您的问题尚未回答，因此，我已修改了您在编辑#2中提供的代码，以完成所需的设计:

Since you didn't mark your question answered yet, I've modified the code you provided in your edit #2 to accomplish your desired design: stackblitz

我更改了以下内容:

• 将容器上的fxLayoutAlign更改为"space-evenly stretch"而不是fxLayoutAlign="start start"，这会将所有项目均匀地分布在x轴上的一行中，并使其拉伸到与该行的最高元素一样高.
• 删除了所有fxFlexFill
• 在垫子卡内容中添加了fxFlex
• 从.product CSS类中删除了高度

• changed the fxLayoutAlign on the container to "space-evenly stretch" instead of fxLayoutAlign="start start" this distributes all items in a row on the x-axis evenly and makes them stretch as high as the highest element of the row.
• removed all fxFlexFill
• added fxFlex to the mat-card-content
• removed the height from the .product CSS-class

关于左侧边框.我认为您的容器距离左侧浏览器窗口太近.我也更改了我的stackblitz中的容器css.

Regarding the border on the left side.. I assume your container is too close to the browser windows left side. I've change the container css in my stackblitz as well.

这篇关于对齐卡片的内容(图像，文本和按钮)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！