Question

我有一个div，左边有一个图像，右边有一些信息（一个跨度，一个h3和另一个跨度）。我希望图像右侧的第一个跨度位于顶部，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_details{
  flex-basis: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

.item_details span{
  font-size: 0.85em;
  color:gray;
}

.item_details a{
  font-size: 0.85em;
  border-radius: 4px;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom:0;
}

小提琴：https://jsfiddle.net/ct1ghpk2/6/

Answer 2

赋予.item-info 100％的高度，使其成为其父级的全高。然后，您可以将弹性框属性justify-content: space-between;添加到.item-info，以使div中的内容按您想要的方式分隔。

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

有关css弹性框的详细信息以及使用它时可用的属性，请参阅this link。

至于.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％的上边距将为您提供您在顶部寻找的间距而其他一切都被推到了最底层。

对齐顶部，中间和底部的项目不起作用

2 个答案: