时间戳

首页 > 解决方案 > 如何将页脚与弹性框“卡片”的底部对齐？

html - 如何将页脚与弹性框“卡片”的底部对齐？

问题描述

我有一系列通过 flexbox 设置的“卡片”。我有一个页脚，我想添加到每个“固定”到每个框底部的页脚（不确定我是否在那里使用了正确的术语）。

但是，无论卡片内内容的长度如何，我都希望它固定在底部。换句话说，我希望页脚根据行中内容最长的卡片捕捉到底部。

这个小提琴希望能解释我的意思。内容最少的卡片的页脚应该与内容较多的卡片在同一位置： https ://codepen.io/anon/pen/xMWYjR

这是代码：

.card-wrapper {
    display: flex;
    justify-content: space-around;
}

.card {
    display: flex;
    flex-direction: column;
    flex: 0 0 30%;
    border: 1px solid #323232;
}

.card-footer {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid #000;
    margin-top: auto;
    align-self: flex-end;
}

<div class="card-wrapper">
    <a href="#" class="card">
        <div class="card-content">
            <h2>Title</h2>
            <p>Content</p>
            <div class="card-footer">
                <p>Footer</p>
            </div>
        </div>
    </a>
    <a href="#" class="card">
        <div class="card-content">
            <h2>Title</h2>
            <p>Content content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content content</p>
            <div class="card-footer">
                <p>Footer</p>
            </div>
        </div>
    </a>
</div>

标签： htmlcssflexbox

解决方案

    .card-wrapper {
        display: flex;
        justify-content: space-around;
    }

    .card {
        display: flex;
        flex-direction: column;
        flex: 0 0 30%;
        border: 1px solid #323232;
    }

  .card * {
    width:100%;
    box-sizing:border-box;
    text-align:center;
  }

    .card-footer {
        display: flex;
        flex-direction: column;
        padding: 16px;
        border: 1px solid #000;
        margin-top: auto;
        align-self: flex-end;
    }
<div class="card-wrapper">
<!-- first card start -->
    <a href="#" class="card">
      
            <h2>Title</h2>
            <p>Content</p>
            <div class="card-footer">
               <p> Footer</p>
            </div>
    </a>
    <!-- first card end -->
    <a href="#" class="card">
        <div class="card-content">
            <h2>Title</h2>
            <p>Content content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content content</p>
            <div class="card-footer">
                <p>Footer</p>
            </div>
        </div>
    </a>
</div>

推荐阅读