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

我有一个包含文本的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>

" />
名称：
航班总数：

飞行员ID:
总小时数：

排名：
集线器：

下面是它的样子：

---

为什么要内联设计样式？一些建议可以使代码更具可持续性（和可读性！）

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>

.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;
}

---

代码笔链接：

您可以使用float:rightIdea:1）将图像作为div的背景，并为div添加图像宽度的填充。2）在图像中使用float，并将文本包装到另一个浮动div中。@marcelo2605 Nice。不知道您可以用文本实现这一点。