CSS - 并排浮动两个元素 [英] CSS - Floating two elements side by side

问题描述

我有两个div。我想要在左侧的div占据尽可能多的空间，因为它需要，而不推动另一个div（右）到下一行。

I have two divs side by side. I want div that is on left hand side to take up as much room as it needs without pushing the other div (on right) to next line.

以下是我现在的状态： http：// jsfiddle .net / RALza /

Here is what I have right now: 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;
}

推荐答案

<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;
}

可以工作。

但是你应该指定浮动元素的宽度。

But you should specify width of floating elements.

这篇关于CSS - 并排浮动两个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！