Question

我有一系列通过弹性框设置的“卡片”。我有一个页脚，我想添加到每个页脚中，以将其自身“固定”在每个框的底部（不确定在此是否使用了正确的术语）。

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

这个小提琴有望解释我的意思。内容最少的卡的页脚应与内容更多的卡的位置相同： 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>

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

Answer 2

您可以尝试以下代码：

描述：我更新了一个简单的代码，告诉.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>

谢谢

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

2 个答案: