html - 如何用html+css做这样的布局？

Question

框是一些对象(按钮、标签、文本区域)。格林的尺寸是动态的。特别是我有一个蓝色盒子粘在底部的问题。

Answer 1

在它周围放置一个支架，它将从“绿色”高度开始，并只给它们绝对和底部 0，你给元素的宽度无关紧要。

编辑:希望这对你有用， float 元素，绿色的在右边，其余的在左边。

<div id="divHolder">
<label id="red">Label</label>
<button id="blue">Button</button>
<div id="green">
    a
    </div>
    <br class="clearFloat" />
</div>

#divHolder {
    width:300px;
    position:relative;

}
#green {
    height:300px;
    background-color: green;
    float:right;
}
#red {
    background-color:red;
     float:left;
    position:absolute;
}
#blue {
    background-color: blue;
    bottom: 0;
    position:absolute;
}
.clearFloat {
 clear:both;   
}

在这里查看: http://jsfiddle.net/YA9yD/32/