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

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

这里是完整的stackblitz

Answer 1

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

您需要将宽度指定为floatRight

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

Answer 2

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

您需要将理由属性指定为fullBtn

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

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

2 个答案: