我确实有以下 HTML 输出:
所以,正如您所看到的,页脚不匹配...
我的 css 组件如下所示:
.card-equal-height {
display: flex;
flex-direction: column;
height: 100%;
}
.card-equal-height
.card-footer {
margin-top: auto;
height: 100%;
}
.card-equal-height.card-footer 这部分无法正常工作。我希望页脚与订单卡相匹配,无论描述有多长。
html:
<div [ngClass]="{'card-highlight': product.listItemHovered}" class="card card-equal-height"
(mouseenter)="hoverListItem(product)"
(mouseleave)="hoverListItem(product)"
(click)="test(product)">
<div class="card-image">
<figure class="image is-square">
<img [src]="product.imageURL" alt="{{product.title}}">
</figure>
</div>
<div class="card-content">
<p class="title has-text-centered"> {{product.title}}</p>
<p class="subtitle">{{product.price | currency: "USD"}}</p>
</div>
<div class="card-footer">
<p class="card-footer-item">
<button (click)="removeFromCart(product); showRemoved()"
class="button is-danger is-outlined is-pulled-left is-small"> Remove
</button>
</p>
<p class="card-footer-item">
<button (click)="addToCart(product);showAdded()"
class="button is-outlined is-primary is-pulled-right is-small"> Add to Cart
</button>
</p>
</div>
</div>
最佳答案
我认为你可以使用flex-grow来改变“card-content”的高度(忘记改变.card-footer)
.card-equal-height
.card-content {
flex-grow:1;
}
有关 Flex 的更多信息,请查看此 link in css-tricks
关于html - bool 玛卡的 CSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63371627/