CSS“ valign”ポジショニング
-
04-07-2019 - |
質問
<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の両方を絶対配置する必要があることです。これがレイアウトで機能するかどうかはわかりません。
所属していません StackOverflow