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

Question

这是我要完成的工作的快速草图。Nvm，我不够熟练，无法在这个盒子里完成这项工作。
我已经写了一些，我会用它做一个 jsfiddle， 我 希望第三个 div 与第一个 div 坐在同一高度。尝试了很多东西，包括利润百分比。有什么我错过的吗？我很容易让它坐在第二个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 的顺序即可

演示

HTML

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

并且不要使用float: top;,top不是有效值，left而是使用

CSS

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

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

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