CSS „align“ Positionierung

Question

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

Nun, das

<h1>

hat einen margin: 0; so ist es an der Spitze des div. Die Höhe des div ist 300px.

Allerdings würde Ich mag die Tabelle am unteren Rand des div, zB platziert werden. valign = "bottom", sondern für die gesamte Tabelle.

Answer 1

Versuchen Sie folgendes: http://jsbin.com/emoce

Obwohl es zu Darryls Lösung ähnlich ist. Außer, dass ich bin nicht Position mit: absolute auf der Verpackung div, sondern Position. In Bezug auf die Tabellenposition, dass absolute zu machen

Answer 2

Hier ist, was Remy Sharp vorgeschlagen:

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

Sieht aus wie es funktioniert!

ich es hier gepostet, so dass es immer hier sein wird.

Answer 3

Was folgt aus:

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

Das einzige Problem ist, dass sowohl die div-Container und die tableContainer divs positionierter absolut sein müssen. Nicht sicher, ob dies für Ihr Layout arbeiten.