Html CSS分区定位问题

我不知道如何建立这个简单的布局

这就是我希望它看起来的样子：

。。。这就是我到目前为止所做的：

我怎样才能得到右上角的黄色div

HTML:

<div class="gray-wrapper">
   <div class="red">centered</div>
   <div class="yellow">top right corner</div>
   <div class="aqua">100% width</div>
</div>

---

只需将

yellow

div放在html的第一位

<div class="gray-wrapper">
   <div class="yellow">top right corner</div>
   <div class="red">centered</div>
   <div class="aqua">100% width</div>
</div>

右上角
居中的
100%宽度

演示

---

完成了

@Ronnie:当你浮动一个DIV时，浏览器会将其放置在它迄今为止构建的内容下方，然后在HTML流中构建跟随浮动DIV的内容，使其围绕浮动DIV“流动”。因此，通过将

黄色

DIV移到顶部，它会移到右上角。谢谢jalynn-我想我现在就明白了。“如果我玩一会儿，我肯定会得到它的。”罗尼，看（尤其是）。问题是，它相对于浮动之前应该在的位置向右/向左浮动。。因此，由于前面的元素是一个块，正常的流指示它从它下面开始。然后它应用浮动，并向右移动。。同样的事情也会发生，如果你把它漂走。。（但是因为视觉上的左对齐在我们的文化中是第一位的，所以您将它放在html中的第一位，并且从未遇到过这个问题。）

<div class="gray-wrapper">
   <div class="yellow">top right corner</div>
   <div class="red">centered</div>
   <div class="aqua">100% width</div>
</div>

body{background:white}


.gray-wrapper{
 width:500px;
height:200px;
background:gray;
border:4px solid gray;
}


.red{
width:200px;
height:100px;
margin-left: 150px;
background:red;
 float:left; 



}


.yellow{
width:50px;
height:100px;
float:right;
background:yellow;
}


.aqua{
width:100%;
height:100px;
background:aqua;
float: left;
}