質問

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

今、

<h1>

にはマージンがあります:0; divの上部にあります。 divの高さは300ピクセルです。

ただし、テーブルをdivの下部に配置したいと思います。 valign =&quot; bottom&quot;しかし、テーブル全体に対して。

役に立ちましたか?

解決

これを試してください: http://jsbin.com/emoce

それはダリルのソリューションに似ていますが。ただし、ラッピングdivでposition:absoluteを使用するのではなく、position:を使用して、テーブルの位置を絶対にします。

他のヒント

レミー・シャープが提案したことは次のとおりです。

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

動作しているようです!

ここに投稿したので、常にここにあります。

これについて:

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

唯一の問題は、コンテナdivとtableContainer divの両方を絶対配置する必要があることです。これがレイアウトで機能するかどうかはわかりません。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top