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

时间:2019-02-10 20:33:08

标签: html css 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>

2 个答案:

答案 0 :(得分:1)

    .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>

答案 1 :(得分:0)

您可以尝试以下代码:

描述:我更新了一个简单的代码,告诉.card-content类显示flex,flex列,并且它在即时父对象上的高度为100%。我还删除了一些代码形式.card-footer align-self:flex-end; 属性。

实际上,您的代码很好,但是您的父级(.card-content)的父级高度不相同。我就解决了。

.card-wrapper {
  display: flex;
  justify-content: space-around;
}
.card {
  display: flex;
  flex-direction: column;
  flex: 0 0 30%;
  border: 1px solid #323232;
}
    
.card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-footer {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid #000;
  margin-top: auto;
}
<div class="card-wrapper">
    <a href="#" class="card">
        <div class="card-content d-flex flex-column">
            <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>
          <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 mt-auto">
                <p>Footer xx</p>
            </div>
        </div>
    </a>
</div>

谢谢