CSS - Xếp hai phần tử cạnh nhau

Question

Tôi có hai div cạnh nhau. Tôi muốn div đó là ở phía bên tay trái để chiếm nhiều chỗ cần thiết mà không cần đẩy div khác (bên phải) sang dòng tiếp theo.

Dưới đây là những gì tôi có ngay bây giờ: 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; 
} 

sẽ làm việc.

Nhưng bạn nên chỉ định chiều rộng của các phần tử thả nổi.

Answer 2

Hãy thử fiddle này: http://jsfiddle.net/RALza/6/

Nó hoạt động bằng cách thay đổi thứ tự của hai divs và làm cho div đầu tiên một yếu tố khối bình thường mà không có một phao.

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

và

#divA 
{ 
    border:1px solid blue; 
} 

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

Answer 3

Bạn có thể sử dụng hộp linh hoạt CSS:

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

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