它的兄弟姐妹的錨元素

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*/ 
} 
​