CSS - 2つの要素を並べて並べて表示

Question

2つの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/

それは2つの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>