左对齐第一个div,右对齐后续div

#container {
  display: flex;
}
#container > div:first-child {
  margin-right: auto;
}

<div id="container">
  <div>Chapter one</div>
  <div>Language:&nbsp;</div>
  <div>English</div>
</div>

向右齐平。

更多详情请点击此处:

• Aligning Three Divs Horizontally Using Flexbox
• Methods for Aligning Flex Items

浏览器支持: 所有主流浏览器都支持Flexbox, except IE < 10 一些最新的浏览器版本,如Safari 8和IE10,需要 vendor prefixes 。要快速添加前缀,请使用 Autoprefixer 。有关更多详细信息,请参阅 this answer .

实现这一点的最简单方法是使用表

<table>
   <tr>
        <td style="align:left;">Chapter One</td>
        <td style="align:right;">Language: English</td>
    </tr>
</table>

使用 float 嵌套 div 可以是解决方案

<div>Chapter one</div>
<div>
    <div style="float:left;">Language:</div>
    <div style="float:right;">English</div>
</div>
</div>

浮动 属性用于指定元素是否可以浮动。 别忘了使用 clear 对于浮动元素之下的元素。