html - 如何对齐三个盒子 : two above each other, 一个在两个盒子的右侧

Question

我尝试在 html5/css3 中对齐三个框(div)。两个盒子在左侧堆叠在一起，其中一个应该位于这两个盒子的右侧，延伸到两个左侧盒子的整个高度。

不幸的是，我无法将右侧的框与其他两个框对齐。它总是出现在左框下方，但与包围 div 的右边缘对齐。

这些是我用来定位框的 css 定义:

#leftTop {
    background-color: green;
    color: silver;
    width: 32%;
    height: 110px;
}

#leftBottom {
    background-color: red;
    color: yellow;
    width: 32%;
    height: 540px;
}

#rightAside {
    background-color: blue;
    color: pink;
    width: 60%;
    height: 650px;
    float:left;;
}

我尝试了几种使用 Display: inline-block 和 float 命令的配置。但不幸的是，没有任何效果。

有人有想法吗？非常感谢您的回答!!!

Answer 1

喜欢this .

HTML:

<div id="leftWrapper">
   <div id="leftTop"></div>
   <div id="leftBottom"></div>
</div>
<div id="rightAside"></div>

CSS:

#leftWrapper {
    float:left;
    width: 32%;
    height: 650px;
}
#leftTop {
    background-color: green;
    color: silver;
    width: 100%;
    height: 110px;
}

#leftBottom {
    background-color: red;
    color: yellow;
    width: 100%;
    height: 540px;
}

#rightAside {
    background-color: blue;
    color: pink;
    width: 60%;
    height: 650px;
    float:right;
}