bootstrap-4 - 如何在flex-wrap之后显示一个div
问题描述
我正在使用带有 flex-wrap 的 flex box 在轨道中显示图像。我可以在 flex 框中休息,但是如何在所有图像之后显示以下 div。查看示例:动态轨道库
底部的 div 元素“这个 div 应该显示在所有图像之后!” 即使 flex-item 元素的数量低于容器的高度,也会直接显示在 div "my-flex-container" 之后。
在该 div 中,我可以中断以在下一行显示文本“这是中断”。
那么我必须在页脚之前插入什么才能在休息后显示?
<style type="text/css">
.my-flex-container {
height: 200px;
}
.my-flex-item {
background-color: black;
border: 2px solid black;
height: 200px;
}
.break {
flex-basis: 100%;
height: 0;
color:white;
}
.img-holder {position: relative; display: inline-block;}
.img-holder img {display: block;}
.img-holder p {
position: absolute;
bottom:-15%;
left: 0;
right: 0;
transform: translate(0, -50%);
text-align: center;
font-size:0.6em;
color: #fff;
text-shadow: 0 0 15px;
background-color: rgba(0,0,0,0.5);
width:100%;
height:10%;
}
</style>
<body style="background-color:black;">
<div class="container-fluid" style="max-width:1600px;">
<div class="row" style="margin-top:100px;">
<div class="col-12">
<div class="d-flex flex-row flex-wrap my-flex-container justify-content-center">
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_106110.jpg" /></a>
<p>PG_106110</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_131688.jpg" /></a>
<p>PG_131688</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_106110.jpg" /></a>
<p>PG_106110</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_105283.jpg" /></a>
<p>PG_105283</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_100526.jpg" /></a>
<p>PG_100526</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_132445.jpg" /></a>
<p>PG_132445</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_105203.jpg" /></a>
<p>PG_105203</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_105796.jpg" /></a>
<p>PG_105796</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_106107.jpg" /></a>
<p>PG_106107</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="/public/images/bestOf/PG_105203.jpg" /></a>
<p>PG_105203</p>
</div>
...
<div class="break">This is a break</div>
</div>
</div>
</div>
</div>
<div class="container-fluid footer" style="max-width:1600px;">
<div class="row" style="margin-top:100px; margin-bottom:28px;">
<div class="col-12" style="background-color:red; height:100px;">
This div should display after all the images!
</div>
</div>
</div>
解决方案
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<style type="text/css">
.my-flex-item {
background-color: black;
border: 2px solid black;
height: 200px;
}
.break {
flex-basis: 100%;
height: 0;
color:white;
}
.img-holder {position: relative; display: inline-block;}
.img-holder img {display: block;}
.img-holder p {
position: absolute;
bottom:-15%;
left: 0;
right: 0;
transform: translate(0, -50%);
text-align: center;
font-size:0.6em;
color: #fff;
text-shadow: 0 0 15px;
background-color: rgba(0,0,0,0.5);
width:100%;
height:10%;
}
</style>
<body style="background-color:black;">
<div class="container-fluid" style="max-width:1600px;">
<div class="row" style="margin-top:100px;">
<div class="col-12">
<div class="d-flex flex-row flex-wrap justify-content-center">
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="https://picsum.photos/seed/picsum/200/300" /></a>
<p>PG_106110</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="https://picsum.photos/seed/picsum/200/300" /></a>
<p>PG_131688</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="https://picsum.photos/seed/picsum/200/300" /></a>
<p>PG_106110</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="https://picsum.photos/seed/picsum/200/300" /></a>
<p>PG_105283</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="https://picsum.photos/seed/picsum/200/300" /></a>
<p>PG_100526</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="https://picsum.photos/seed/picsum/200/300" /></a>
<p>PG_132445</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="https://picsum.photos/seed/picsum/200/300" /></a>
<p>PG_105203</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="https://picsum.photos/seed/picsum/200/300" /></a>
<p>PG_105796</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="https://picsum.photos/seed/picsum/200/300" /></a>
<p>PG_106107</p>
</div>
<div class="img-holder">
<a href="/test/test0"><img class="my-flex-item" src="https://picsum.photos/seed/picsum/200/300" /></a>
<p>PG_105203</p>
</div>
...
<div class="break">This is a break</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" style="max-width:1600px;">
<div class="row" style="margin-top:100px; margin-bottom:28px;">
<div class="col-12" style="background-color:red; height:100px;">
This div should display after all the images!
</div>
</div>
</div>
我删除my-flex-container
了,它似乎工作。你给它一个固定的高度,它就被挤在一起了。
推荐阅读
- selenium - 在 chrome://downloads 中使用 Chromedriver 保存文件
- java - 在 netbeans 中清理和构建 javafx 应用程序时出错,XML 文档结构必须在同一实体内开始和结束
- android - Android 文档中不完整的方法访问修饰符和/或非访问修饰符
- x86 - 我的 /bin/ls -l Shellcode 如何处理空字节?
- python - 如何在 CreateView 中将外键设置为自定义用户模型?
- android - 如何从 Firebase 控制台删除 FirebaseUser 当前用户?
- javascript - 如何使用 javascript 创建有效的 svg 元素
- python - 从字符串转换为字节数组时保存字节序列
- mysql - 三个连接的查询非常慢
- java - 在 OSGi 中运行时如何将 groovy-all 从 2.4 升级到 2.5?