html - 将元素锚定到它的兄弟姐妹

Question

是否有可能仅使用 HTML 和 CSS 实现类似以下的锚定布局？

+- #parent ------
| +-# elem1 ---
| | Varibale height (depends on content) - top anchored
| | to #parent (top: 0)
| |
| +------------
| +-# elem2 ---
| | Varibale height (depends on content) - top anchored
| | to #elem1 bottom and bottom #anchored to #elem3 top
| |
| +------------
| +-# elem3 ---
| | Fixed height - top anchored to #elem2 bottom and
| | bottom anchored to #parent bottom (bottom: 0)
| |
| +------------
+----------------

编辑：#parent 元素高度可能是固定的，我正在寻找类似的东西：

http://doc.qt.nokia.com/qtquick-components-symbian-1.1/examples-native-scalability-anchors.html

http://doc.qt.nokia.com/qt-maemo/anchor-layout.html

Answer 1

我是否误解了，或者这是你想要的 - http://jsfiddle.net/joplomacedo/rkKqy/ - ？

的HTML

<div class="parent">
    <div class="child">varaible height child</div>
    <div class="child">varaible height child</div>
    <div class="child">fixed height child</div>
</div>​

CSS

.parent {
    position: relative;
    padding-bottom: 50px; //equal to last-child's height
}

.child:first-child {
    /*styles for the first-child here*/
}

.child:nth-child(2) {
    /*styles for the second-child here*/
}

.child:last-child {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px; //the fixed height
    /*anymore styles for the last-child here*/
}
​