如何使第二个浮动div成为第一个浮动div的顶部？

Question

我在包装器中有两个浮动div。它们是left和right。我想让正确的div显示在第一个div（左）的顶部。右边应该是第一个，左边应该是第二个。

这是代码

<div id="wrapper">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</div>

CSS

#left{
    float:right;
    }
#right{
    float:left;
    width:100%;
}
#wrapper{
    width:100px;
   background-color: #000fff;
}

我希望右边的div有100％的宽度。这是否可以在不改变标记和单独改变CSS的情况下实现？

JSFIDDLE

EDITED 我希望正确的div在顶部和左边应该在底部之后。当我使用位置绝对为右div时，左div被隐藏。 JSFIDDLE。 应该看起来像

Answer 1

使用以下css：

#left{
    float:right;
    border: 1px solid black;
    }
#right{
    float:left;
    position: absolute;
    top: 0px;
}
#wrapper{
    width:100px;
   background-color: #000fff;
}

Answer 2

如果您想在离开之前放置正确的div，只需从float:left移除#right属性。

Fiddle

如果您想要左侧的DIV ，则需要使用absolute position

Answer 3

首先清除浮动，然后将position:relative设置为父＆＃34;包装＆＃34;和position:absolute;到正确的div。

查看 this fiddle

Answer 4

如果你想用只是 css来做这件事，你必须使用绝对定位。但是，只有你知道每个元素的高度和这样的元素的确切数量。请检查 fiddle 。

假设每个元素的高度为20px，那么您可以在top: 0px放置一个，在top:20px放置第二个。要像通常的相对方式一样使用remaning空间，你必须添加填充等于你的元素的总高度，它具有绝对定位到包装器。

或者，您可以使用JavaScript在html中更改顺序。

Answer 5

到目前为止，我对这些答案并不太信服。我建议避免'绝对'甚至是javascript。此外，如果你想让它对所有浏览器友好，你应该真正指定诸如高度之类的东西。一种常见的误解是，如果没有巨大的黑客攻击，我的设计就无法在每个现代浏览器上运行（我多年前就已经开始使用IE5.5和Firefox等），这通常是由于CSS没有正确形成和有效。现在尝试以下方法：

 #left, #right {position:relative; float:left; height:30px;  color:white; width:inherit;   }

 #left{
 background-color:blue;
 margin-top:30px;
 }
 #right{
 background-color:green;
 margin-left:-100%;
 margin-top:0;
 }
 #wrapper{
 width:100px;
 background-color: #000fff;
 }