Question

可能是一个相当基本的解决方案，但我似乎无法弄清楚...已经设置了一个jsfiddle来演示： http://jsfiddle.net/AxKq8/1/

HTML

<div class="wrapper">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
</div>

CSS

.wrapper{
width: 100%;
}

.box {
width: 50%;
}

#box-1 {
height: 200px;
background-color: blue;
}

#box-2 {
height: 100px;
background-color: red;
}

#box-3 {
height: 300px;
float:right;
background-color: green;
position: relative;
top:0px;
right:0px;
}

我有3个div。我想做的是让绿色div的顶部与蓝色div的顶部对齐。

正如你所看到的，我试图将前两个div左移，右边第三个div。那没用，所以尝试了相对定位。也尝试使用清晰的，但它是我的想法！

有关如何使这项工作的任何建议？

谢谢！乔恩

Answer 1

使用div

定位第三个absolute top:0

#box-3 {
    height: 300px;
    float:right;
    background-color: green;
    position: absolute;
    top:0px;
    right:0px; 
  }

工作代码:JSFIDDLE

Answer 2

您可以将蓝色和红色框放在容器中，然后将绿色框放在另一个容器中。将两个容器漂浮而不是盒子。

http://jsfiddle.net/AxKq8/9/

<强> HTML

<div class="wrapper">
    <div class="container">
        <div id="box-1" class="box">
        </div>
        <div id="box-2" class="box">
        </div>
    </div>
    <div class="container">
        <div id="box-3" class="box">
        </div>
    </div>
</div>

<强> CSS

.wrapper{
    width: 100%;
}

.container {
    float: left;
    width: 50%
}

#box-1 {
    height: 200px;
    background-color: blue;
}

#box-2 {
    height: 100px;
    background-color: red;
}

#box-3 {
    height: 300px;
    background-color: green;
}

Answer 3

尝试一下：JSFiddle

HTML：

<div class="wrapper">
    <div class="box-group box">
        <div id="box-1" class="box2"></div>
        <div id="box-2" class="box2"></div>
    </div>
    <div class="box-group box">
        <div id="box-3" class="box2"></div>
    </div>
</div>

CSS：

.wrapper{ width: 100%; }
.box { width: 50%; }
.box2 { width: 100%; }
.box-group { float: left; }
#box-1 { height: 200px; background-color: blue; }
#box-2 { height: 100px; background-color: red; }
#box-3 { height: 300px; background-color: green; }

我使用.box-group类创建了列，我将前两个项目分组到第一个列div中，因此堆叠和浮动将正确显示。

2列布局问题 - 堆叠和浮动

3 个答案: