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>