CSS - 並排浮動兩個元素

Question

我有兩個並排的div。我希望左側的div佔用儘可能多的空間，而不必將其他div（右側）推到下一行。

這是我現在所擁有的：http://jsfiddle.net/RALza/

HTML

<div id="container"> 
    <div id="divA"> left text </div> 
    <div id="divB"> right text </div> 
</div> 

CSS

#divA 
{ 
    float:left; 
    border:1px solid blue; 
    width:100%; 
} 

#divB 
{ 
    float:right; 
    border:1px solid red; 
} 

Answer 1

<div id="container"> 
    <div id="divB"> right text </div> 
    <div id="divA"> left text </div> 
</div> 

#divA 
{ 
    overflow:auto; 
    border:1px solid blue; 
} 

#divB 
{ 
    float:right; 
    border:1px solid red; 
} 

會工作。

但是你應該指定浮動元素的寬度。

Answer 2

試試這個小提琴：http://jsfiddle.net/RALza/6/

它可以通過改變兩個div的順序，使第一個div一個正常的塊元素沒有浮動。

<div id="container"> 
    <div id="divB"> right text </div> 
    <div id="divA"> left text </div> 
</div> 

和

#divA 
{ 
    border:1px solid blue; 
} 

#divB 
{ 
    float:right; 
    border:1px solid red; 
} 

Answer 3

您可以使用CSS靈活盒：

#container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
}

<div id="container"> 
 
    <div id="divA">left text</div> 
 
    <div id="divB">right text</div> 
 
</div>