Question

我正在构建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>

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

正在显示大拇指和大拇指向下的图标，但未占据全部可用高度。相反，它们仅占色谱柱面积的一小部分。如何确保两个图标占据该特定列的行宽度的一半。

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

Answer 1

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

<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（单页应用程序），因此每个页面都作为{{ 1}}。对于通过javascript文件和CSS呈现的图像也是如此。

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

然后，您可以使用CSS对其进行操作，并使用index.html属性将display: grid应用于col元素，如果需要，可以将其更改为类或ID，并使用类似{{1 }}，然后将CSS选择器更改为col-2，而不是<ion-col col-2 class="thumbs-col">...</ion-col>。

显示网格足以将其分成相等的两行，但是如果由于某种原因它不希望以这种方式分离，只需将.thumbs-col添加到您的col选择器即可。

我为图标添加了代码，以便可以使用flexbox在图标的垂直和水平方向上居中。对于大小，因为图标不是图像，而是SVG，您需要使用.col[col-2]而不是grid-auto-flow: row;来操纵其大小。例如，如果更改为带有图标的按钮，则可以使用font-size。

希望这会有所帮助。

IONIC卡布局样式似乎不居中且间距不均

1 个答案: