CSS «aligner» le positionnement

Question

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

Maintenant, le

<h1>

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

Cependant, je souhaiterais que le tableau soit placé au bas de la division, par exemple. valign = " bottom " mais pour toute la table.

Answer 1

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

Bien que ce soit similaire à la solution de Darryl. Sauf que je n'utilise pas position: absolute sur la division d'habillage, mais plutôt position: relative pour que la position de la table devienne absolue.

Answer 2

Voici ce que Remy 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 ce sera toujours ici.

Answer 3

Qu'en est-il de cela:

<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 les div conteneurs et div de tableContainer doivent être positionnés de manière absolue. Vous ne savez pas si cela fonctionnera pour votre mise en page.