如何解决flex-wrap后如何显示div
我正在使用带有flex-wrap的flex盒在轨道中显示图像。我可以在弹性框内休息一下，但如何在所有图像后显示以下div。 参见示例：dynamic track gallery
底部div元素“此div应该显示在所有图像之后！”会在div“ my-flex-container”之后直接显示，即使flex-item元素的数量延伸到容器高度以下。
在该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.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.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，它似乎可以正常工作。您给它定了一个固定的高度，然后它被挤压在一起了。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
