Posizionamento "allinea" CSS

Question

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

Ora,

<h1>

ha un margine: 0; quindi è nella parte superiore del div. L'altezza del div è di 300 px.

Tuttavia, vorrei che il tavolo fosse posizionato in fondo al div, ad es. valign = " sotto " ma per l'intero tavolo.

Answer 1

Prova questo: http://jsbin.com/emoce

Anche se è simile alla soluzione di Darryl. Tranne che non sto usando position: absolute sul wrapping div, ma piuttosto position: relative per rendere la posizione della tabella assoluta a quella.

Answer 2

Ecco cosa ha suggerito 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>

Sembra che funzioni!

L'ho pubblicato qui, quindi sarà sempre qui.

Answer 3

Che dire di questo:

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

L'unico problema è che sia il div contenitore che i div tableContainer devono essere posizionati in modo assoluto. Non sono sicuro che funzionerà per il tuo layout.