Question

我想将图像对齐到ion-col元素的底部。这是代码：

 <ion-grid>
<ion-row>
  <ion-col col-6>
    <img src="assets/imgs/mobile-icon.png" />
  </ion-col>
  <ion-col col-6>
    <img src="assets/imgs/laptop-icon.png" />
  </ion-col>
</ion-row>
<ion-row>
  <ion-col class="object-label" col-6>
    Smartphone
  </ion-col>
  <ion-col class="object-label" col-6>
    Ordinateur
  </ion-col>
</ion-row>
<ion-row>
  <ion-col col-6>
    <img src="assets/imgs/tablet-icon.png" />
  </ion-col>
  <ion-col col-6>
    <img src="assets/imgs/camera-icon.png" />
  </ion-col>
</ion-row>
<ion-row>
  <ion-col class="object-label" col-6>
    Tablette
  </ion-col>
  <ion-col class="object-label" col-6>
    Appareil photo
  </ion-col>
</ion-row>
<ion-row>
  <ion-col col-6>
    <img src="assets/imgs/headphones-icon.png" />
  </ion-col>
  <ion-col col-6>
    <img src="assets/imgs/other-icon.png" />
  </ion-col>
</ion-row>
<ion-row>
  <ion-col class="object-label" col-6>
    Accessoires
  </ion-col>
  <ion-col class="object-label" col-6>
    Autres
  </ion-col>
</ion-row>

我可以使用文档中指定的列属性来执行此操作：https://ionicframework.com/docs/api/components/grid/Col/

但由于某种原因，它不起作用。

Answer 1

它对我来说很好。请检查

<ion-grid>

      <ion-row>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/mobile-icon.png" />
          </div>
        </ion-col>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/laptop-icon.png" />
          </div>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col class="object-label" col-6>
          Smartphone
        </ion-col>
        <ion-col class="object-label" col-6>
          Ordinateur
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/tablet-icon.png" />
          </div>
        </ion-col>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/camera-icon.png" />
          </div>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col class="object-label" col-6>
          Tablette
        </ion-col>
        <ion-col class="object-label" col-6>
          Appareil photo
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/headphones-icon.png" />
          </div>
        </ion-col>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/other-icon.png" />
          </div>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col class="object-label" col-6>
          Accessoires
        </ion-col>
        <ion-col class="object-label" col-6>
          Autres
        </ion-col>
      </ion-row>
    </ion-grid>

Ionic将图像对准ion-col的底部

1 个答案: