时间戳

首页 > 解决方案 > 卡片操作部分始终位于卡片底部

html - 卡片操作部分始终位于卡片底部

问题描述

我应该使用什么方法才能使操作部分始终位于卡片的底部？

请参阅CodePen以获得更好的理解。

<div class="container">
<div class="card">
    <div class="title">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia incidunt pariatur dicta deserunt neque vel magnam molestiae, animi optio ipsam alias accusamus quam excepturi ducimus suscipit sint amet, omnis mollitia.
    </div>
    <div class="middle">Middle Content</div>
    <div class="actions">
        <div>check availability</div>
        <button>Add to Wish</button>
        <button>Add to Cart</button>
    </div>
</div>

<div class="card">
    <div class="title">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia incidunt pariatur dicta deserunt
    </div>
            <div class="middle">Middle Content</div>
    <div class="actions">
        <div>check availability</div>
        <button>Add to Wish</button>
        <button>Add to Cart</button>
    </div>
</div>
<div class="card">
    <div class="title">Lorem ipsum, dolor s
    </div>
            <div class="middle">Middle Content</div>
    <div class="actions">
        <div>check availability</div>
        <button>Add to Wish</button>
        <button>Add to Cart</button>
    </div>
</div>

.container {
    display: flex;
 }
.card {
    display: flex;
    flex-direction: column;
    width: 320px;
    border: 1px solid grey;
    align-items: center;
    margin: 20px;

.title{
    padding: 20px;
}
.middle{
    padding: 20px;
}
.actions{
    text-align: center;
}

标签： htmlcss

解决方案

您可以添加margin-top: auto. 这会将操作部分向下推

.actions {
  margin-top: auto;
  text-align: center;
}

推荐阅读