显示文本时，卡片标题中的离子卡片图像会自动调整大小答案

【问题标题】：Ionic card image in card header is automatically resized when a text is displayed显示文本时，卡片标题中的离子卡片图像会自动调整大小
【发布时间】：2019-09-25 04:39:45
【问题描述】：

我在页面上显示了这两张卡片：

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-card class="offersCard">
        <ion-card-header>
            <b>Company Name</b>
      <br/>
      <b>Dealer</b>
    </ion-card-header>
    <ion-card-content>
      <div>
        <div class="floatLeft imgStyle">
          Image
        </div>
        <div class="floatRight">

          <div>
          Offer Descriptions:
          <br/>
          Offer Descriptions:... 
          Offer Descriptions:...
          Offer Descriptions:... 
          Offer Descriptions:...
          Offer Descriptions:...
          </div>
        </div>
      </div>
      <div>
        <div class="floatLeft alignTxt">
          Price:
          d
        </div>
        <div class="floatRight fullBtn">
          <button ion-button primary>CHECK OFFER</button>
        </div>
      </div>
    </ion-card-content>
  </ion-card>
  <ion-card class="offersCard">
        <ion-card-header>
            <b>Company Name</b>
      <br/>
      <b>Dealer</b>
    </ion-card-header>
    <ion-card-content>
      <div>
        <div class="floatLeft imgStyle">
          Image
        </div>
        <div class="floatRight">

          <div>
          Offer Descriptions:
          <br/>
          Offer Descriptions:
          </div>
        </div>
      </div>
      <div>
        <div class="floatLeft alignTxt">
          Price:
          d
        </div>
        <div class="floatRight fullBtn">
          <button ion-button primary>CHECK OFFER</button>
        </div>
      </div>
    </ion-card-content>
  </ion-card>
</ion-content>

当卡片有一个大文本作为描述时，它会被调整到左边而不是保持在 scss 中指定的相同高度和重量：

.offersCard{
  .floatRight{
    float: right;
    white-space: normal;
    margin-left: 4em;
  }
  .floatLeft{
    float: left;
    width: 10em;
    vertical-align: middle;
  }
  div{
    display: flex;
  }
  .imgStyle{
    width: 150px;
    height: 150px;
  }
  .fullBtn{

    float: right;
    margin-right: 0em
  }
  .alignTxt{
    margin-top: 1em;
  }
}

此外，我的“检查报价”按钮设置为向右浮动，但它停留在卡片中间。

这是一个完整的工作stackblitz

【问题讨论】：

标签： css ionic-framework sass ionic3

【解决方案1】：

查看更新的https://stackblitz.com/edit/ionic-xqm7sa

您需要将 justify 属性指定为 fullBtn

.fullBtn{
    justify-content: flex-end;
    float: right;
    margin-right: 0em;
}

【讨论】：

非常感谢您的帮助

【解决方案2】：

查看更新的https://stackblitz.com/edit/ionic-acboxj

你需要为floatRight指定宽度

.floatRight{
    float: right;
    white-space: normal;
    margin-left: 2em;
    width: calc(100% - 150px - 2em);
}

【讨论】：

对于按钮？