javascript - 如何垂直排列浮动元素

Question

我有 3 个字段集。

我想做的是这样的布局：

我希望右下角的字段集底部对齐，所以它的底部将与左侧的字段集对齐。

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

有没有简单的方法？或者我将不得不使用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>