如何对齐三个框：两个在彼此上方，一个在两个的右侧答案

【问题标题】：How to align three boxes: two above each other, one on the righthandside of the two如何对齐三个框：两个在彼此上方，一个在两个的右侧
【发布时间】：2013-09-26 06:28:15
【问题描述】：

我尝试在 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 命令。但不幸的是，没有任何效果。

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

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

感谢您的快速回复！听起来太容易令人难以置信:-)
没问题。请不要忘记接受答案，以免问题不再显示为未回答。

【解决方案2】：

<style>
#left
{
float:left;
 width: 32%;
}
#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:left;;
}
</style>
<div id="left">
<div id="leftTop"></div>
<div id="leftBottom"></div>
</div>
<div id="rightAside"></div>

【讨论】：

这是一个优雅的解决方案！

【解决方案3】：

这是一种方法：

HTML：

<div class="container">

   <div class="box3">This is box 3</div>

   <div class="box1">This is box 1</div>

   <div class="box2">This is box 2</div>

</div>

CSS：

.container {
  position: relative;
  width: 100%;
  background: #cccccc;
}

.box1 {
  width: 100px;
  height: 100px;
  background: #ff0000;
}

.box2 {
  width: 100px;
  height: 100px;
  background: #00ff00;
}

.box3 {
  position: absolute;
  right: 0px;
  height: 100%;
  background: #0000ff;
}

工作小提琴在这里：http://jsfiddle.net/Xmg6Z/

【讨论】：

感谢您的快速帮助！