CSS "valign" Positionnement

Question

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

Maintenant, le

<h1> 

a une marge: 0; donc il est au sommet de la div. La hauteur de la div est 300px.

Cependant, je voudrais que la table soit placée au bas de la div, par exemple. valign = "bas" mais pour toute la table.

Answer 1

Essayez ceci: http://jsbin.com/emoce

Bien qu'il soit similaire à la solution de Darryl. Sauf que je n'utilise pas la position: absolute sur la div d'emballage, mais plutôt la position: relative pour rendre la position de la table absolue à cela.

Answer 2

Qu'en est-ce:

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

Le seul problème est que le conteneur div et les divs tableContainer doivent être absolue positionné. Je ne sais pas si cela fonctionnera pour votre mise en page.

Answer 3

Voici ce que Remy de Sharp a suggéré:

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

On dirait que ça marche!

Je l'ai posté ici donc il sera toujours là.