css - 显示文本时，卡片标题中的 ionic 卡片图像会自动调整大小

Question

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

<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;
  }
}

另外，我的“Check Offer”按钮设置为向右浮动，但它仍位于卡片的中间。

这是一个完整的工作 stackblitz

Answer 1

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

需要给floatRight指定宽度

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