CSS "VALIGN" Позиционирование

Question

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

Теперь

<h1> 

имеет запас: 0; так что он находится в верхней части div. Высота div равна 300px.

Однако я бы хотел, чтобы стол располагался в нижней части div, например. valign = "bottom", но для всей таблицы.

Answer 1

Попробуйте это: http://jsbin.com/emoce

Хотя это похоже на решение Дэррил в. Кроме того, что я не использую позицию: абсолютный на обертке div, а скорее положение: относительно того, чтобы позиция таблицы была абсолютной.

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 дивы должны быть абсолютным позиционируются. Не уверен, что это будет работать для вашего макета.

Answer 3

Вот что предложил Remy Sharp:

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

Похоже, это работает!

Я разместил его здесь, чтобы он всегда был здесь.