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

问题描述：

我有一个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; 
}

答

给.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;一列使内容开始在底部和上升...添加25％的上边距的范围内该div会给你你在上面寻找的空间，而其他的东西都被推到了最下面。

这不是一个准确的解决方案.items_details – Bhawna

@Bhawna我做了上述OP提供的jsfiddle中提出的更改，它对我来说工作得很好。跨度（他们希望在中心）和链接（他们想要在底部）是在适当的地方。让我知道你的意思是“准确”的解决方案。 – SidTheBeard

我很抱歉，我上面发送的小提琴是不同的。我编辑过。你可以与你提供的解决方案共享一个小提琴 – Bhawna

答

你要求必须是这样按我理解的解决方案。

我所做的更改就在此。

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

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

相关推荐