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

概述我希望有这样的结构： 但是它不起作用,图像,日期,标题和副标题都可以,但是你知道如何将图像标题放在图像和视图下方,并将链接保存在其他文本下方,与1rem左边相同吗？ 我在这里有例子：http://jsfiddle.net/tyyj57gs/6/,问题应该是因为横向卡片div有显示flex,但我没有成功解决这个问题. HTML： <div class="container pb-4"> <div 我希望有这样的结构：

但是它不起作用,图像,日期,标题和副标题都可以,但是你知道如何将图像标题放在图像和视图下方,并将链接保存在其他文本下方,与1rem左边相同吗？

我在这里有例子：http://jsfiddle.net/tyyj57gs/6/,问题应该是因为横向卡片div有显示flex,但我没有成功解决这个问题.

HTML：

<div >  <div >    <div >      <div >        <img src="http://via.placeholder.com/200x100"/>        <div >          <span >Date</span>          <h4 >Title</h4>          <span >SubTitle</span>        </div>          <div >          <span>Image Title</span>          <a >#VIEw</a>          <a >#Save</a>        </div>      </div>      </div>

CSS

.horizontal-card{  display: flex;  border:1px solID gray;  margin-bottom:1rem;  img{    wIDth: 200px;    height: 100px;    border-bottom: 2px solID red;  }  .horizontal-card-body{    display: flex;    flex-direction: column;    margin-left:1rem;  }}

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

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

<div >  <div >    <div >      <div >        <img src="http://via.placeholder.com/200x100" />        <div >          <span >Date</span>          <h4 >Title</h4>          <span >SubTitle</span>        </div>        <div >          <span>Image Title</span>          <a >#VIEw</a>          <a >#Save</a>        </div>      </div>    </div>

总结

以上是内存溢出为你收集整理的html – 如何将水平卡页脚div设置在其他div的正下方而不是右侧全部内容，希望文章能够帮你解决html – 如何将水平卡页脚div设置在其他div的正下方而不是右侧所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。