我希望包含3个社交图标的div在底部对齐,右边的tile中使用相同的div。但右侧的社交图标div被推下,因为它上方有2行文本,而左侧只有一行。我怎么能解决这个问题?
这是一个fiddle和片段,可以重现我的问题:
.fh5co-gallery {
position: relative;
margin-bottom: 1em;
float: left;
width: 100%;
}
.fh5co-gallery .gallery-item .overlay h2,
.fh5co-gallery .gallery-item .overlay span {
position: relative;
z-index: 12;
margin-bottom: 0;
text-align: center;
display: block;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.fh5co-gallery .gallery-item {
width: 33%;
position: relative;
overflow: hidden;
display: block;
float: left;
z-index: 110;
}
.fh5co-gallery .gallery-item img {
position: relative;
max-width: 100%;
-webkit-transition: 0.9s;
-o-transition: 0.9s;
transition: 0.9s;
}
.fh5co-gallery .gallery-item .overlay {
position: absolute;
right: 0;
left: 0;
bottom: 0;
top: 0;
z-index: 11;
vertical-align: middle;
padding-top: 18%;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#social_icons {
text-align: center;
margin-top: 30px;
}
<div class="fh5co-gallery">
<div style="width:33.33%" class="gallery-item" href="#">
<img src="https://via.placeholder.com/410">
<span class="overlay">
<h2>test test test test test test test</h2>
<span>test</span> <br>
<div id="social_icons" style="text-align:center;">
<span style="display:inline-block;">1</span>
<span style="display:inline-block;">2</span>
<span style="display:inline-block;">3</span>
</div>
</span>
</div>
<div style="width:33.33%" class="gallery-item" href="#">
<img src="https://via.placeholder.com/410">
<span class="overlay">
<h2>bedankt</h2>
<span>test</span> <br>
<div id="social_icons">
<span style="display:inline-block;">1</span>
<span style="display:inline-block;">2</span>
<span style="display:inline-block;">3</span>
</div>
</span>
</div>
</div>
在.fh5co-gallery .gallery-item .overlay
中创建一个列flexbox并使用margin-top: auto
并使用margin-bottom
来调整social_icons
的位置 - 请参阅下面的演示和fiddle here
:
.fh5co-gallery {
position: relative;
margin-bottom: 1em;
float: left;
width: 100%;
}
.fh5co-gallery .gallery-item .overlay h2,
.fh5co-gallery .gallery-item .overlay span {
position: relative;
z-index: 12;
margin-bottom: 0;
text-align: center;
display: block;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.fh5co-gallery .gallery-item {
width: 33%;
position: relative;
overflow: hidden;
display: block;
float: left;
z-index: 110;
}
.fh5co-gallery .gallery-item img {
position: relative;
max-width: 100%;
-webkit-transition: 0.9s;
-o-transition: 0.9s;
transition: 0.9s;
}
.fh5co-gallery .gallery-item .overlay {
position: absolute;
right: 0;
left: 0;
bottom: 0;
top: 0;
z-index: 11;
display: flex; /* ADDED*/
flex-direction: column; /* ADDED*/
vertical-align: middle;
padding-top: 18%;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#social_icons {
text-align: center;
/* margin-top: 30px; */
margin-top: auto; /* ADDED*/
margin-bottom: 30px; /* adjust this value */
}
<div class="fh5co-gallery">
<div style="width:33.33%" class="gallery-item" href="#">
<img src="https://via.placeholder.com/410">
<span class="overlay">
<h2>test test test test test test test</h2>
<span>test</span> <br>
<div id="social_icons" style="text-align:center;">
<span style="display:inline-block;">1</span>
<span style="display:inline-block;">2</span>
<span style="display:inline-block;">3</span>
</div>
</span>
</div>
<div style="width:33.33%" class="gallery-item" href="#">
<img src="https://via.placeholder.com/410">
<span class="overlay">
<h2>bedankt</h2>
<span>test</span> <br>
<div id="social_icons">
<span style="display:inline-block;">1</span>
<span style="display:inline-block;">2</span>
<span style="display:inline-block;">3</span>
</div>
</span>
</div>
</div>