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，它似乎可以正常工作。您给它定了一个固定的高度，然后它被挤压在一起了。

bootstrap-4 flexbox photo-gallery

flex-wrap后如何显示div

问题描述

解决方法

相关问答