如何垂直排列浮动元素

Question

我有3个字段集。

我想要的是这种布局：

我希望右下方的fieldset是底部对齐的，所以它的底部会与左边的fieldset对齐。

它应该以不同的分辨率工作。

有简单的方法吗？或者我将不得不使用javascript动态添加一个margin-top？

代码：

<div class="fieldSetsContainer">
<fieldset class="leftFieldSet">test
    <br/>test
    <br/>test
    <br/>test
    <br/>test
    <br/>test
    <br/>
</fieldset>
<div class="rightFieldSets">
    <fieldset>test2</fieldset>
    <fieldset class="bottomRightFieldSet">test3</fieldset>
</div>

的CSS：

.rightFieldSets {
float:left;
width:34%;
}
.rightFieldSets fieldset {
clear:left;
width:89%;
}
.leftFieldSet {
width:62%;
float:left;
margin-right:1px;
}
.bottomRightFieldSet {
margin-top:6px;
}

这是一个链接： http://jsfiddle.net/bbryK/

Answer 1

我的解决方案假设有两件事：

• 右栏有固定的宽度。
• 左栏必须始终为最高。

请参阅http://jsfiddle.net/c3AFP/2/

Html结构：

<div class="container">
    <div class="right">
        <fieldset class="top"></fieldset>
        <fieldset class="bottom"></fieldset>
    </div>
    <fieldset class="left"></fieldset>
</div>

Css样式：

.container {
    position: relative;
}
.top, .bottom {
    width: 300px;
}
.left {
    margin-right: 300px;
}
.right {
    float: right;
    margin-left: 10px;
}
.bottom {
    position: absolute;
    bottom: 0;
}

修改

以下是一个按百分比排列的正确列的解决方案：http://jsfiddle.net/c3AFP/5/

编辑2：

这是一个基于表格的解决方案，它消除了左列最高的要求。使用vertical-align，您可以调整较小元素相对于最高元素的对齐位置：http://jsfiddle.net/c3AFP/7/

Answer 2

我给你一个小提琴的起点。请玩，制作一些代码并分享相同的内容。

http://jsfiddle.net/vY462/

#one{width:200px;height:70px;border:2px solid black;float:left;}
#two,#three{width:200px;height:25px;border:2px solid black;float:right;margin-top:5px;}

<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>

Answer 3

试试这个

FIDDLE

#main {
    position: relative;
    height: 100px;
    width: 200px;
    background: gray;
    border: 5px solid black;
    display: inline-block;
}
#top {
    position: relative;
    height: 40px;
    width: 155px;
    background: gray;
    border: 5px solid black;
    display: inline-block;
    top: -60px;    
}
#bottom {
    position: relative;
    height: 40px;
    width: 155px;
    background: gray;
    border: 5px solid black;
    display: inline-block;
    left: -165px;
}