我有一系列通过弹性框设置的“卡片”。我有一个页脚,我想添加到每个页脚中,以将其自身“固定”在每个框的底部(不确定在此是否使用了正确的术语)。
但是,无论卡中内容的长度如何,我都希望它固定在底部。换句话说,我希望页脚根据该行中内容最长的卡而跳到底部。
这个小提琴有望解释我的意思。内容最少的卡的页脚应与内容更多的卡的位置相同: 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>
答案 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>
谢谢