html - 在顶部、中心和底部对齐元素不起作用

Question

我有一个 div，左边有一个图像，右边有一些信息(一个 span，一个 h3 和另一个 span)。我希望图像右侧的第一个跨度位于顶部，h3 位于中心，另一个跨度位于底部。但这是行不通的。同样在分隔符 div 的右侧，我有一个我也想放在底部的链接和一个我想放在中心的跨度。

你知道问题出在哪里吗？

示例:https://jsfiddle.net/ct1ghpk2/2/

HTML:

 <div class="item">
    <img src="">
    <div class="item_info">
      <span class="align-t">Span aligned at top</span>
      <h3>Title aligned at center</h3>
      <span class="align-b">Span aligned at bottom</span>
    </div>
    <div class="item_separator"></div>
    <div class="item_details">
      <span>Span aligned at center</span>
      <a href="">Link aligned at bottom</a>
    </div>
  </div>

CSS:

.item{
  background-color:white;
  display: flex;
  margin-bottom: 20px;
  align-items: flex-start;
  padding: 10px;
  justify-content: space-between;
  height: 10em;
  border:1px solid red;
}

.item img{
  width: 20%;
  height: 100%;
}

.item_info{
  margin-left: 10px;
  flex-basis: 64%;
  display:flex;
  flex-direction:column;
}

.item_info .align-t{
  color:gray;
  font-size: 0.8em;
  margin-bottom: 20px;
}

.item_info h3{
  font-size: 1em;
  text-align: justify;
  margin-bottom: 20px;
}

.item-info .align-b{
}

.item_separator{
  height:100%;
  width:1px;
  background-color:red;
}

.item_details{
  flex-basis: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.item_details span{
  font-size: 0.85em;
  margin-bottom: 10px;
  color:gray;
}

.item_details a{
  font-size: 0.85em;
  padding: 10px;
  border-radius: 4px;
  width: 100%;
  text-align: center;
}


img {
  width: 100%;
  max-width: 100%;
  vertical-align: middle;
  margin: 0;
}

Answer 1

给 .item-info 一个 100% 的高度，这样它就是它父元素的全高。然后，您可以将 flexbox 属性 justify-content: space-between; 添加到 .item-info 以使 div 中的内容按您想要的方式间隔。

.item-info {
    #yourStyles
    height: 100%;
    justify-content: space-between;
}

参见 this link有关 css flex box 和使用它时可用的属性的更多详细信息。

至于.item-details...

.item_details{
    #yourStyles
    height: 100%;
    justify-content: flex-end;
}

.item_details span{
    #yourStyles
    margin-top: 25%;
    text-align: center;
}

justify-content: flex-end; 对于一列来说，内容从底部开始向上……在该 div 内的跨度上添加 25% 的顶部边距会给你您正在寻找的顶部间距，同时将其他所有内容推到底部。