CSS div定位问题答案

【问题标题】：CSS div positioning issueCSS div定位问题
【发布时间】：2013-07-05 22:21:39
【问题描述】：

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

这就是我想要的样子：

...这是我目前所拥有的：

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

【问题讨论】：

标签： html css css-float positioning

【解决方案1】：

只需将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>

http://cssdesk.com/KYRTT的演示

【讨论】：

@Ronnie：当您浮动一个 DIV 时，浏览器会将其放置在它目前构建的内容下方，然后构建 HTML 流中浮动 DIV 之后的内容以围绕浮动分区。因此，通过将yellow DIV 移动到顶部，它会转到右上角。
谢谢 jalynn - 我想我现在明白了。如果我玩了一段时间，我肯定会得到它。
@Ronnie，见alistapart.com/article/css-floats-101（尤其是alistapart.com/article/css-floats-101#section5）。问题是它在浮动之前相对于它应该在的位置向右/向左浮动。因此，由于前一个元素是一个块，正常流决定它从它下面开始。然后它应用浮动，它向右移动。如果你把它向左浮动也会发生同样的事情。（但是因为视觉左在我们的文化中是第一位的，你把它放在 html 中的第一个并且永远不会体验到问题..)

【解决方案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;
}

完成！

【讨论】：