CSS “alinhar” Posicionamento
-
04-07-2019 - |
Pergunta
<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.
Solução
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
Outras dicas
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.
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.