右浮动文本

Question

尝试将 div 中的文本与右浮动对齐

尝试向我的信息添加选项卡，似乎正在使用电话号码，但如果我将其浮动正确，则不起作用。

此外，当我的屏幕小于 400px 时，信息文本似乎并未 100% 居中。

代码：

p span {
  display: inline-block;
  width: 100px;
}

.responsive {
  display: inline-block;
  width: 100%;
}

.responsive .left {
  float: left;
  width: 50%;
}

.responsive .right {
  float: right;
  text-align: right;
  width: 50%;
}

@media (max-width: 400px) {
  .responsive .left,
  .responsive .right {
    width: 100%;
    text-align: center;
  }
}

<div class="responsive">
  <div class="left">
    <h2>Infomation:</h2>
    <p>
      <span>Phone:    </span>[phone]<br/>
      <span>Fax:      </span>[phone]<br/>
      <span>Email:    </span><a href="mailto:[email protected] ">[email protected]<br/></a>
    </p>
  </div>

  <div class="right">
    <h2>Business Hours:</h2>
    <p>
      <span>Mon - Th:</span> 8:30 - 5:00<br/> <span>Friday:</span> 8:30 - 3:30<br/>
    </p>
  </div>
</div>

Answer 1

我将使用和更新我之前给出的答案与文本对齐：

.box, h1 {
  text-align: center;/* update*/
  }
  .box {
  background:linear-gradient(to left, gray 50%, silver 50%) /* see center*/
}
.left p {display:table;
margin:auto;
text-align:left;
}.left p span {
display:inline-block;
padding-right:3em
}
.left p span:nth-child(3) {padding-right:4em;}
.left p span:last-of-type {padding-right:1em}

@media screen and (min-width:399px) {
  .box {
    display: flex;
    justify-content: space-between;
    text-align: left;/* update*/
  }
  .text-right {
    text-align: right;
  }
}

<h1 style="font-size:3vw">Play me full page and resize window</h1>
<div class="box">
  <div class="left">
    <h2>Infomation:</h2>
    <p>
      <span>Phone:    </span>[phone]<br/>
      <span>Fax:      </span>[phone]<br/>
      <span>Email:    </span><a href="mailto:[email protected] ">[email protected]<br/></a>
    </p>
  </div>

  <div class="right text-right">
    <h2>Business Hours:</h2>
    <p>
      Monday - Thursday<br/> 8:30 - 5:00<br/> Friday <br/> 8:30 - 3:30<br/>
    </p>
  </div>
</div>