html - 1 个 div 旁边的 2 个堆叠 div

Question

我正在尝试创建 1 个 div，它的右侧旁边有 2 个堆叠的 div。我已经设法编写了以下代码，但我无法将绿色框与红色框下方对齐，目前这似乎超出了所需区域。

我的 HTML:

<div id="blue"></div>
<div id="red"></div>
<div id="green"></div>

我的 CSS:

blue {
width: 100px;
height: 100px;
background: blue;
float: left;
position: relative;
} 

#red {
width: 100px;
height: 50px;
background: red;
float:right;
}

#green {
width: 100px;
height: 50px;
background: green;

float: right;
clear: both;
}

如果有人可以建议我如何解决这个问题，我将不胜感激。

提前致谢。

Answer 1

对于 #green，将 clear: both; 更改为 clear: right;。瞧!看到这个 fiddle :http://jsfiddle.net/ru1vpox8/ .

问题是清除两者会将其定位在红色和蓝色 div 的下方。但是，将其更改为仅在右侧清除允许它仍然与蓝色 div 处于同一级别，但强制它低于红色 div 的级别。