javascript - 如何垂直排列 float 元素

Question

我有 3 个字段集。

我想做的是这个布局:

我希望右下方的字段集底部对齐，因此它的底部将与左侧的字段集对齐。

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

有没有简单的方法？或者我将不得不使用 javascript 动态地向其添加边距顶部？

代码:

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