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

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

要在absolute下方显示第二行图像，您需要在relative中设置父级，以便它成为大小和协调的参考。

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

要显示的行平均为400％width + XX％margin s加在一起。

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

将div放在（align-item）拉伸div下面

1 个答案: