html - 将 div 定位在 (align-item) 拉伸(stretch)的 div 下方

Question

我想使用 align-item: stretch 将一个 div 定位在多个 flex-items 之下；使所有元素的高度相同。然后无论我将新的 div 放在哪个 div 后面，它都将低于上面 div 的拉伸(stretch)高度。

当前结果

这是当前的 HTML

<ul class="flex-container stretch">
       <li class="flex-item"><img src="1.png" />
             <div class="info">
                    <div class="detail">
                           <div class="image">
                                        <img src="camera.png"/>
                           </div>
                    </div>
                    <div class="detail">
                           <div class="image">
                                        <img src="camera.png"/>
                           </div>
                    </div>
                    <div class="detail">
                           <div class="image">
                                        <img src="camera.png"/>
                           </div>
                    </div>
                    <div class="detail">
                           <div class="image">
                                        <img src="camera.png"/>
                           </div>
                    </div>
             </div>
       </li>
       <li class="flex-item"><img src="2.png" /></li>
       <li class="flex-item"><img src="1.png" /></li>
       <li class="flex-item"><img src="2.png" /></li>
</ul>

这是我希望也能够包装图像的当前 CSS。并使整个事情响应。

.flex-container {
padding: 0;
margin: 0;
list-style: none;
       -ms-box-orient: horizontal;
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       float: left;
       flex-wrap: wrap;
}
.stretch { 
-webkit-align-items: stretch; 
       align-items: stretch; 
}
.flex-item{
       width: 23%;
       margin: 0 1%;
       background: orange;
}
.flex-item img{
width: 100%;
}
.info{
       padding:35px 0;
       width:100%;
       float:left;
       left:0;
       text-align:center;
       display:none;
       position:absolute;
       z-index:999;
       background: #fff;
}
.info .detail{
       width:25%;
       float:left;
}

.info image{
       width:65%;
}

预期结果

谢谢。

Answer 1

如果您没有设置垂直边距，元素应该自行拉伸(stretch)并且一行中的每个元素都将具有相同的高度。

要在 absolute 中显示下方的第二行图像，您需要在 relative 中设置父级，使其成为大小和坐标的引用。

请注意，这里的每个父项平均占整行的一夸脱，并且边距介于它们之间。

要显示的行将是 400% width + XX% 的 margin 加在一起的平均值。

要在下方显示它，您可以使用 top:100% 并最终添加 margin-top 以留出间隙。

.flex-container {
padding: 0;
margin: 0;
list-style: none;
       -ms-box-orient: horizontal;
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       float: left;
       flex-wrap: wrap;
}
.stretch { 
/* this was defaut behavior */
}
.flex-item{
       width: 23%;
       margin: 0 1%;
       background: orange;
}
.flex-item img{
width: 100%;
}
/* =========================================================   update*/
.flex-item {
  position:relative;
}
.flex-item > img:hover ~ .info {
  top:100%;
  display:flex ;
}
.info{
       min-width:426%;
       top:100%;
/* =========================================================   end update */
       padding:35px 0;
       left:0;
       text-align:center;
       position:absolute;
       z-index:999;
       background: #fff;  
       display:none ;
}

.info .detail{
       min-width:25%;
       float:left;/* useless when parent is a flex box */
       margin:0  ;
}

.info image{/* !!! this rule does nothing. there is no tag image in your HTML structure */
       width:65%;
}

<ul class="flex-container stretch">
       <li class="flex-item"><img src="http://dummyimage.com/300x300/&text=Hover_me" />
             <div class="info">
                    <div class="detail">
                           <div class="image">
                                        <img src="http://dummyimage.com/300x300/bad/&text=camera.png"/>
                           </div>
                    </div>
                    <div class="detail">
                           <div class="image">
                                        <img src="http://dummyimage.com/300x300/0d8/&text=camera.png"/>
                           </div>
                    </div>
                    <div class="detail">
                           <div class="image">
                                        <img src="http://dummyimage.com/300x300/456/&text=camera.png"/>
                           </div>
                    </div>
                    <div class="detail">
                           <div class="image">
                                        <img src="http://dummyimage.com/300x300/f00/&text=camera.png"/>
                           </div>
                    </div>
             </div>
       </li>
       <li class="flex-item"><img src="http://dummyimage.com/300x300/&text=2.png" /><br/> something more</li>
       <li class="flex-item"><img src="http://dummyimage.com/300x300/&text=1.png" /></li>
       <li class="flex-item"><img src="http://dummyimage.com/300x300/&text=2.png" /></li>
</ul>