Yii2-左右のテキストを整列する方法

Question

テキストを左右に揃えたい。解決のために私はtext on left and right side of elementを調べました。しかし、それは私のために働いていませんでした。

私は何をしましたか？

<section class="content"> 

<div> 
    <div class="div1" style="text-align:left; float: left;"> 
     Date: 
     <span style="padding-bottom: 10px; border-bottom: 1px solid black"> 
      <?php $model=$dataProvider->getModels()[0]; print_r($model['Date'])?> 
     </span> 

    </div> 
    <div class="div2" style="text-align:right; float: right;"> 
     Reciept#: 
     <span style="padding-bottom: 10px; border-bottom: 1px solid black"> 
      OGP-<?php $model=$dataProvider->getModels()[0]; print_r($model['OGP_Serial_No'])?> 
     </span> 

    </div> 

</div> 

</section> 

出力

私はすでに解決のためにチェックして述べたように。

ご協力いただければ幸いです。

Answer 1

が、それはあなたが例えば50％をDIV1とDIV2のディメンションを定義することができます

<section class="content"> 
 
<div> 
 
    <div class="div1" style="text-align:left; float: left;width:50%;"> 
 
     Date: 
 
     <span style="padding-bottom: 10px; border-bottom: 1px solid black;"> 
 
      <?php $model=$dataProvider->getModels()[0]; print_r($model['Date'])?> 
 
     </span> 
 

 
    </div> 
 
    <div class="div2" style="text-align:right; float: right;width:50%;"> 
 
     Reciept#: 
 
     <span style="padding-bottom: 10px; border-bottom: 1px solid black"> 
 
      OGP-<?php $model=$dataProvider->getModels()[0]; print_r($model['OGP_Serial_No'])?> 
 
     </span> 
 

 
    </div> 
 

 
</div> 
 
</section>

Answer 2

Answer 3

に動作します幅は適用 'DIV1' と 'DIV2' のスタイルdisplay:block;を追加各。 display：inline-blockを設定するか、またはfloatingを使用します。

.div1{ 
     text-align:left; 
     float: left; 
     width:50%; 
    } 
    .div2{ 
     text-align:right; 
     float:right; 
     width:50%; 
    } 

代わりにあなたはフレキシボックスに使用することができます