Yii2-如何对齐左侧和右侧的文本php

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

应用宽度，它将起作用：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

为＆＃39; div1＆＃39;添加样式display:block;和＆＃39; div2＆＃39;

Answer 3

你可以为div1和div2定义一个维度，例如50％。并设置display：inline-block或use floating。

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

或者你也可以使用flexbox