这是我的图像版本.让我知道如果有任何问题,我已经使用绝对位置作为页脚的位置.
对于CSS的SCSS版本,请参考小提琴,否则请参阅下面的代码片段!
JSFiddle Demo
.horizontal-card {
position: relative;
display: flex;
border: 1px solid gray;
margin-bottom: 1rem;
}
.horizontal-card img {
width: 200px;
height: 130px;
border-bottom: 30px solid orange;
}
.horizontal-card .horizontal-card-body {
display: flex;
flex-direction: column;
margin-left: 1rem;
}
.horizontal-card .horizontal-card-footer {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 30px;
display: flex;
align-items: center;
}
.horizontal-card .horizontal-card-footer span {
width: 200px;
display: inline-block;
}
.horizontal-card .horizontal-card-footer a {
margin-left: 10px;
}
Date
Title
Subtitle