CSS “alinhar” Posicionamento

Question

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

Agora, a

<h1>

tem um margin: 0; por isso é no topo da div. A altura da div é 300px.

No entanto, eu gostaria que a tabela a ser colocado na parte inferior da div, por exemplo. valign = "bottom", mas para toda a mesa.

Answer 1

Tente isto: http://jsbin.com/emoce

Apesar de ser semelhante à solução de Darryl. Só que eu não estou usando position: absolute na div de embrulho, mas sim posição:. Relação a fazer a posição da tabela absoluta para que

Answer 2

Aqui está o que Remy afiada sugerido:

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

Parece que ele funciona!

eu postei isso aqui por isso vai estar sempre aqui.

Answer 3

O que sobre isso:

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

O único problema é que tanto a div recipiente e os divs tableContainer precisa ser absoluta posicionado. Não tenho certeza se isso vai funcionar para o seu layout.