时间戳

首页 > 解决方案 > IONIC Card 布局样式似乎不居中且不等间距

css - IONIC Card 布局样式似乎不居中且不等间距

问题描述

我正在构建 IONIC 应用程序并制作了如下卡片布局。

<ion-content padding>
        <ion-card *ngFor="let book of booksData.books; let i=index">
              <ion-row>
                <ion-col col-3>
                    <ion-avatar item-start>
                    <img src="/../../img/authorImage.png">
                    </ion-avatar>
                </ion-col>
              <ion-col col-7>
                <ion-card-header>
                  #{‌{i+1}}
                </ion-card-header>
                  <ion-card-content>
                    <p>{‌{book.text}}</p>
                    <p>{‌{book.person}}</p>
                  </ion-card-content>
                </ion-col>
                <ion-col col-2>
                    <ion-row>
                    <ion-icon name="thumbs-up"></ion-icon>
                    </ion-row>
                    <ion-row>
                    <ion-icon name="thumbs-down"></ion-icon>
                    </ion-row>
                </ion-col>
                </ion-row>
                </ion-card>
</ion-content>

该卡分为三列（如预期的那样），我如何面对以下问题

拇指向上和拇指向下图标正在显示，但未占用完整的可用高度。相反，他们只占据了柱子的一小部分区域。如何确保这两个图标占据该特定列的行宽度的一半。

请提供有关如何解决此问题的任何意见。

在此处输入图像描述

标签： cssangularionic-frameworksass

解决方案

好的，这就是您可以解决这两个问题的方法，这是您页面的代码：

<ion-card *ngFor="let book of booksData.books; let i=index">
        <ion-row>
            <ion-col col-3>
                <ion-avatar item-start>
                    <img src="./assets/img/authorImage.png">
                </ion-avatar>
            </ion-col>
            <ion-col col-7>
                <ion-card-header>
                  #{‌{i+1}}
                </ion-card-header>
                <ion-card-content>
                    <p>{‌{book.text}}</p>
                    <p>{‌{book.person}}</p>
                </ion-card-content>
            </ion-col>
            <ion-col col-2>
                <ion-icon name="thumbs-up"></ion-icon>
                <ion-icon name="thumbs-down"></ion-icon>
            </ion-col>
        </ion-row>
</ion-card>

这是您页面的 css

.col[col-2] {
  display: grid;

  ion-icon {
    display: flex;
    font-size: 2em;
    align-self: center;
    justify-self: center;
  }
}

让我们看一下代码：

对于图像，您需要添加相对于index.html文件的路径，因为 Ionic 应用程序只是一个 SPA（单页应用程序），因此每个页面都作为index.html. 同样适用于通过 javascript 文件和 CSS 呈现的图像。

对于您的竖起大拇指按钮，您首先需要从 HTML 中删除行，它们不需要位于行内。

然后您可以使用 CSS 对其进行操作，使用属性将 adisplay: grid应用于您的 col 元素col-2，如果您愿意，您可以将其更改为类或 ID，并使用类似的东西<ion-col col-2 class="thumbs-col">...</ion-col>并将 CSS 选择器更改为.thumbs-col而不是.col[col-2].

显示网格足以分隔成 2 个相等的行，但如果由于任何原因它不能以这种方式分隔，只需添加grid-auto-flow: row;到您的 col 选择器。

对于图标，我添加了一个代码，以便它可以使用 flexbox 垂直和水平居中图标。对于图标不是图像而是 SVG 的大小，您需要使用font-size和 not来操作它的大小height/width。例如，如果您更改为带有图标的按钮，则可以使用height/width.

希望这可以帮助。

推荐阅读