對齊容器

Question

我有一個跨度，必須對齊它的容器內容的底部和最左邊。跨度文本節點和容器文本節點字體大小可能不同。

無論跨度如何，都應該始終與其容器文本節點底部和最左側對齊。我嘗試使用浮動左邊的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。在此先感謝

Answer 1

你有一個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>

Answer 2

我用柔性property

https://plnkr.co/edit/flxsEcpSBe8sr2w3wPFc?p=preview

 div{ 
      font-size:14px; 
      display:flex; 
      align-items:flex-end; 
      flex:1; 
     } 

Answer 3

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