html - CSS div定位问题

Question

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

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

...这就是我到目前为止所拥有的：

http://cssdesk.com/vQ3qr

如何获得右上角的黄色 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>

CSS

.gray-wrapper{
width:500px;
height:200px;
background:gray;
border:4px solid gray;
}
.red{
width:200px;
height:100px;
margin:0 auto;
background:red;

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

Answer 1

只需将yellowdiv 放在 html 中的第一个 ..

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

在http://cssdesk.com/KYRTT进行演示

Answer 2

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

完毕！