将 div 定位在（对齐项）拉伸 div 下方

Question

我想使用 align-item 将 div 定位在多个弹性项目下方：stretch;使所有项目的高度相同。然后无论我将新 div 放在哪个 div 后面，它都将低于上述 div 的拉伸高度。

当前结果

这是当前的 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

如果您没有设置垂直边距，则元素应自行拉伸，并且一行中的每个项目都将是相同的height。

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

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

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

要在下面显示它，您可以使用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>