Posizionamento "allinea" CSS
-
04-07-2019 - |
Domanda
<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.
Soluzione
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.
Altri suggerimenti
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.
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.