將一個div放置在（align-item）拉伸div下面

Question

我想使用align-item：stretch來將div放置在多個flex-items下面：使所有項目的高度相同。然後，無論在哪個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

如果您沒有設置垂直邊距，則元素應該由themselve延伸，並且每行上的每個項目將會是相同的height。

要顯示absolute下面的第二行圖像，您需要將父圖像設置爲relative，以便它成爲大小和座標的參考。

請注意，這裏的每位家長都是整行中的一個平均四分之一，並且他們之間的邊際。

要顯示的行將平均爲400％width +將margin的XX％加在一起。

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