将文本部分移动到div的右侧

Question

我有一个包含文本的div，我想将一些文本移动到div的右侧，而不必创建和处理表格。这就是我所拥有的，但无效：

    <div style="height:50px;background-color:#06276F;color:#FFF;padding:5px;">
    <img align="left" height="50px" width="50px" style="margin-right: 10px;"
        src="<?php echo PilotData::getPilotAvatar($pilotid);?>" />
    <strong>Name: </strong> <?php echo Auth::$userinfo->firstname . ' ' . Auth::$userinfo->lastname;?>
    <span style="text-align:right;"><strong>Total Flights: </strong><?php echo Auth::$userinfo->totalflights?></span><br />
    <strong>Pilot ID: </strong> <?php echo $pilotid ; ?>
    <span style="text-align:right;"><strong>Total Hours: </strong><?php echo Auth::$userinfo->totalhours;?></span><br />
    <strong>Rank: </strong><?php echo Auth::$userinfo->rank;?>
    <span style="text-align:right;"><strong>Hub: </strong><?php echo Auth::$userinfo->hub;?></span><br />
    </div>

这就是看起来的样子：

Answer 1

为什么要设计内联样式？一些建议，使您的代码更具可持续性（可读性）。

<强> HTML：

<div class="container">
  <img class="avatar" height="50" width="50" src="http://placekitten.com/50/50" />
  <div class="info">
    <ul>
      <li><b>Name:</b> Christopher Pratt</li>
      <li><b>Pilot ID:</b> UAL1</li>
      <li><b>Rank:</b> Captain</li>
    </ul>

    <ul>
      <li><b>Total Flights:</b> 1</li>
      <li><b>Total Hours:</b> 90.3</li>
      <li><b>Hub:</b> KJFK</li>
    </ul>
  </div>
</div>

<强> CSS：

.container {
  background: #06276f;
  color: #fff;
  display: inline-block;
  font-family: "Verdana";
  font-size: 11px;
  height: 50px;
  padding: 5px;
  width: 390px;
}

.avatar {
  float: left;
  margin-right: 10px;
}

.info {
  line-height: 1.5;
}

ul, li { margin: 0; padding: 0; }

ul {
  display: inline-block;
  margin-right: 10px;
}

li {
  list-style-type: none;
}

Codepen链接：http://cdpn.io/tilra