对齐第一div来左对齐右后续的div

Question

我希望在同一水平线上显示三个文本的，具体如下：

|               | 
| Chapter one        Language: English |    
|               | 

我使用|表示任一左侧或右侧的极端窗户。这是我现在有：

<div> 
<div>Chapter one</div> 
<div>Language:</div> 
<div>English</div> 
</div> 

文本English最终将通过组合框来代替。我应该如何设计我的div？

Answer 1

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

无论你最终不得不在右边的一个或两个div（取决于您的组合框建立），上面的方法将起作用。它基本上保持第一个红色左冲，其他所有红线右冲。

更多细节在这里：

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

---

浏览器支持：Flexbox将被所有主流浏览器，支持except IE < 10。一些最新的浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。更多详情，请点击this answer。

Answer 2

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

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

Answer 3

在嵌套div使用float可以是溶液

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

float属性用于指定一个元素是否可以漂浮或没有。 不要忘记使用clear浮动元素以下的元素。