当多个div上面有多行文本时,如何对齐它们

问题描述 投票:0回答:1

我希望包含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>
html css css3 flexbox
1个回答
1
投票

.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>
© www.soinside.com 2019 - 2024. All rights reserved.