设置2列布局css，其中一列具有两个部分

Question

这里是我想要完成的快速草图。 Nvm，我不够熟练，不能在这个盒子里做这个工作 我写了一些，我会用它来制作一个jsfiddle， here it is 我希望第3个div与第1个div位于同一高度。尝试过很多东西，包括margin-percentages。我错过了什么吗？我让它很容易坐在第二个div的高度。

css：

#col11{
margin: 0;
float: top;
width: 50%;
height: 100;
border: 1px red solid;
}

#col12{
margin: 0;
float: left;
width: 50%;
height: 400;
border: 1px blue solid;
}

#col21{
    margin: 0px;
float: right;
clear: none;
width: 49%;
height: 500;
border: 1px pink solid;
}

Answer 1

只需改变div的顺序，你就可以了

Demo

HTML

<div id="col11"></div>
<div id="col21"></div>
<div id="col12"></div>

不要使用float: top;，top不是有效值，请改用<{1}}

CSS

left