html - 2 列布局问题 - 堆叠和 float

Question

可能是一个相当基本的解决方案，但我似乎无法弄清楚...已经设置了一个 jsfiddle 来演示: http://jsfiddle.net/AxKq8/1/

HTML

<div class="wrapper">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
</div>

CSS

.wrapper{
width: 100%;
}

.box {
width: 50%;
}

#box-1 {
height: 200px;
background-color: blue;
}

#box-2 {
height: 100px;
background-color: red;
}

#box-3 {
height: 300px;
float:right;
background-color: green;
position: relative;
top:0px;
right:0px;
}

我有 3 个 div。我想要做的是让绿色 div 的顶部与蓝色 div 的顶部对齐。

如您所见，我尝试将前两个 div 向左浮动，将第三个 div 向右浮动。那没有用，所以尝试了相对定位。也尝试使用 clear，但它让我望而却步!

关于如何使这项工作有什么建议吗？

谢谢!乔恩

Answer 1

将第三个 div absolute 定位为 top:0

#box-3 {
    height: 300px;
    float:right;
    background-color: green;
    position: absolute;
    top:0px;
    right:0px; 
  }

工作代码 :JSFIDDLE