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;
}

Answer 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>

Answer 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/

如何对齐三个盒子：两个在彼此之上，一个在两个右侧

3 个答案: