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

您可以使用CSS灵活框：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个小提琴：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;
}