我有一个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;
}
这不是一个准确的解决方案.items_details – Bhawna
@Bhawna我做了上述OP提供的jsfiddle中提出的更改,它对我来说工作得很好。跨度(他们希望在中心)和链接(他们想要在底部)是在适当的地方。让我知道你的意思是“准确”的解决方案。 – SidTheBeard
我很抱歉,我上面发送的小提琴是不同的。我编辑过。你可以与你提供的解决方案共享一个小提琴 – Bhawna