對齊第一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浮動元素以下的元素。