CSS 「VALIGN」 定位

Question

<div> 
<h1>Title</h1> 
<table> 
... 
</table> 
</div> 

現在，

<h1> 

有一個保證金：0; 所以它在div的頂部。 div的高度是300px。

但是我希望表格放在div的底部，例如。 valign =「底部」，但整個表。

Answer 1

試試這個：http://jsbin.com/emoce

雖然它類似於達里爾的解決方案。除了我沒有在包裝div上使用position：absolute，而是使用位置：相對來說，表格的位置是絕對的。

Answer 2

這個怎麼樣：

<style type="text/css"> 
#container { 
    position: absolute; 
    margin: 0; 
    height:300px; 
    border:1px solid #000; } 
#container h1 { 
    margin:0; } 
#tableContainer { 
    position: absolute; 
    bottom:0; } 
</style> 

<div id="container"> 
    <h1>Title</h1> 
    <div id="tableContainer"> 
     <table id="tableLayout"> 
      <tr><td>...</td></tr> 
     </table> 
    </div> 
</div> 

唯一的問題是，無論是div容器和tableContainer的div需要是絕對定位。不知道這是否適用於您的佈局。

Answer 3

這裏是雷米夏普建議：

<style type="text/css" media="screen"> 
#container { 
    position: relative; 
    margin: 0; 
    height:300px; 
    border:1px solid #000; 
} 
#container h1 { 
    margin:0; 
} 
#tableLayout { 
    position: absolute; 
    bottom:0; 
    border: 1px solid #c00; 
} 
</style> 

<div id="container"> 
    <h1>Title</h1> 
    <table id="tableLayout"> 
     <tr><td>example cell</td></tr> 
    </table> 
</div> 

看起來像它的作品！

我貼在這裏，所以它會一直在這裏。