コンテナdiv内のdivを垂直方向に垂直にどのように垂直に整列させますか？

Question

私は電話番号が上部よりもむしろ<hr>行の真上に来るように、すべてを垂直に揃えています。

<div> 
 
\t <div style="float:left; text-align: left;"> 
 
\t \t Name<br/> 
 
\t \t 555 main street<br/> 
 
\t \t City, State<br/> 
 
\t \t Country<br/> 
 
\t \t Zip<br/> 
 
\t </div> 
 
\t <div style="float:right; text-align: right;"> 
 
\t \t Phone: 555-555-5555<br/> 
 
\t \t Cell: 555-555-5555<br/> 
 
\t </div> 
 
</div> 
 
<hr style="clear:left; border: none; border-bottom: 1px solid black">

Answer 1

あなたは、単にこのようなフレックス使用することができます。

.container { 
 
    display: flex; 
 
    align-items: flex-end; /* this will apply the bottom alignement*/ 
 
} 
 

 
.container>div { 
 
    flex: 1; 
 
}

<div class="container"> 
 
    <div style="text-align: left;"> 
 
    Name<br/> 555 main street<br/> City, State<br/> Country 
 
    <br/> Zip 
 
    <br/> 
 
    </div> 
 
    <div style="text-align: right;"> 
 
    Phone: 555-555-5555<br/> Cell: 555-555-5555<br/> 
 
    </div> 
 
</div> 
 
<hr style="clear:left; border: none; border-bottom: 1px solid black">

インラインブロック要素を持つ。また、別の解決策（古いブラウザのために必要であれば）：

.container { 
 
    font-size: 0; /* remove white spaces*/ 
 
} 
 

 
.container>div { 
 
    display: inline-block; 
 
    width: 50%; 
 
    box-sizing: border-box; 
 
    font-size: initial; 
 
}

<div class="container"> 
 
    <div style="text-align: left;"> 
 
    Name<br/> 555 main street<br/> City, State<br/> Country 
 
    <br/> Zip 
 
    <br/> 
 
    </div> 
 
    <div style="text-align: right;"> 
 
    Phone: 555-555-5555<br/> Cell: 555-555-5555<br/> 
 
    </div> 
 
</div> 
 
<hr style="clear:left; border: none; border-bottom: 1px solid black">