html底部选择卡,html – 如何将水平卡页脚div设置在其他div的正下方而不是右侧...

这是我的图像版本.让我知道如果有任何问题,我已经使用绝对位置作为页脚的位置.

对于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

Image Title

#View

#Save