Wie vertikale vertikale Ausrichtung zwei divs mit unterschiedlichen Schriftgrößen in einem Container div

Question

Ich brauche den Rechnungstext ausgerichtet und die Rechnungsnummer rechts ausgerichtet werden. Ich möchte, dass sie beide auch unten ausgerichtet sind, ansonsten sieht es seltsam aus mit der Unterstreichung unten. Ich habe folgende html:

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

mit folgendem CSS:

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

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

Ich kann nicht herausfinden, wie sie sowohl vertikal miteinander ausgerichtet zu bekommen. Da ist extra Code drin, um Dinge zu zeigen, die ich erfolglos versucht habe.

Answer 1

vertical-align: bottom; funktioniert nur auf Inline-Blöcken, wenn Sie float s es bewegte sich zu anderen Block formatting context. Das erreichen Sie mit 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

Ich habe es gemacht mit relativ/absolut Positionierung Ich ziehe inline-block statt float Gehen Sie mit nach unten

.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