コンテナ内の異なるフォントサイズの2つのdivを縦に並べる方法

Question

請求書のテキストを左揃えにし、請求書番号を右揃えにする必要があります。私はそれらを両方とも下一直線にすることが必要です。そうでなければ、下の下線と奇妙に見えます。私はそれらの両方が一緒に垂直に配向取得する方法を見つけ出すことはできません

.invoiceTitle 
{ 
    float: left; 
    font-size: 36px; 
    vertical-align: bottom; 
} 

.invoiceNumber 
{ 
    float: right; 
    font-size: 16px; 
    vertical-align: bottom; 
} 

：以下CSSと

<div style="height:75px; line-height:75px;"> 
    <div class="invoiceTitle">Invoice</div> 
    <div class="invoiceNumber"># 12</div> 
</div> 

：私は、次のHTMLを持っています。私が失敗したことを示すための余分なコードがあります。

Answer 1

vertical-align: bottom;は、floatを使用するたびに、Block formatting contextに移動したときのみ、インラインブロックでのみ機能します。 これは、flexbox & align-items: flex-endで実現できます。

.container { 
 
    height: 75px; 
 
    display: flex; 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
    align-items: flex-end; 
 
} 
 

 
.invoiceTitle { 
 
    flex: 1; 
 
    font-size: 36px; 
 
} 
 

 
.invoiceNumber { 
 
    font-size: 16px; 
 
    flex: 1; 
 
    text-align: right; 
 
}

<div class="container"> 
 
    <div class="invoiceTitle">Invoice</div> 
 
    <div class="invoiceNumber"># 12</div> 
 
</div>

Answer 2

私は私はあなたが `垂直使用する場合

.container 
 
{ 
 
    font-size: 36px; 
 
    position:relative; 
 
} 
 
.invoiceTitle, .invoiceNumber{ 
 
    display:inline-block; 
 
    position:absolute; 
 
    bottom:0; 
 
} 
 
.invoiceNumber{ 
 
\t right:0; 
 
    font-size: 16px; 
 
}

<div class="container"> 
 
    <div class="container" style="height:750px; line-height:75px;"> 
 
     <div class="invoiceTitle">Invoice</div> 
 
     <div class="invoiceNumber"># 12</div> 
 
    </div