我有一个跨度,它必须与它的容器的内容对齐底部和最左边。跨文本节点和容器文本节点字体大小可能不同。
无论它的跨度应该始终与其容器文本节点底部和最左侧对齐。我尝试使用float左移到span
节点。它与最左边对齐,但不与底部对齐。将float
移至跨度,将底部对齐但不是最左侧。对不起,如果我没有更好地解释你。
这里也是我尝试过的代码:
.flexCtn{
display:flex;
align-items:center;
justify-content:flex-end;
height:50px;
width:300px;
border:1px solid #dfdfdf;
background:#fff;
}
.w100{
font-size:30px;
width:100%;
text-align:right
}
span{
font-size:14px;
float:left;
display:inline-block;
}
<div class="flexCtn">
<div class="w100">
<span>check</span>
the alignment
</div>
</div>
P.S我不想对DOM进行任何修改。我有这个DOM结构的具体原因,如果我要解释你们,那将是模糊的。也不希望绝对位置应用于span
。提前致谢
答案 0 :(得分:6)
您有一个flexbox
容器 - 为什么不使w100
成为flexbox
并使用align-items: center
垂直对齐 - 请参阅下面的演示:
.flexCtn {
display: flex;
align-items: center;
justify-content: flex-end;
height: 50px;
width: 300px;
border: 1px solid #dfdfdf;
background: #fff;
}
.w100 {
font-size: 30px;
width: 100%;
text-align: right;
display: flex;
justify-content: space-between;
align-items: center;
}
span {
font-size: 14px;
float: left;
display: inline-block;
}
<div class="flexCtn">
<div class="w100">
<span>check</span>
the alignment
</div>
</div>
答案 1 :(得分:0)
我使用了flex属性
https://plnkr.co/edit/flxsEcpSBe8sr2w3wPFc?p=preview
div{
font-size:14px;
display:flex;
align-items:flex-end;
flex:1;
}
答案 2 :(得分:0)
.flexCtn{
display:flex;
align-items:center;
justify-content:flex-end;
height:50px;
width:300px;
border:1px solid #dfdfdf;
background:#fff;
}
.w100{
font-size:30px;
width:100%;
text-align:right
}
span{
font-size:14px;
float:left;
display:inline-block;
padding : 16px 0 0 0; /* specify top position */
}
<div class="flexCtn">
<div class="w100">
<span>check</span>
the alignment
</div>
</div>