HTML表のセルに複数の要素があります。私はいくつかの要素をセルの底に整列させ、いくつかは上に整列させたい。要素を底に整列させるのに問題があります。私のテーブルには、次のとおりです。要素をHTML表のセルの下部に揃えます。
<tr>
<td style="background-color: #007CE2">
<p id="t1_list">test<br>another<br>testing</p>
<input type="text" name="t1_input" id="t1_input">
<button>
Add
</button>
</td>
<td style="background-color: #E54040">
<p id="t2_list"></p>
<div class="value_input2">
<input type="text" name="t2_input" id="t2_input">
<button>
Add
</button>
</div>
</td>
</tr>
div要素内の要素は、セルの中央に滞在したい、というよりも下部に滞在しているようだが。私は今までCSSで2つの異なる方法を試してきました。
div.value_input {
position: absolute;
bottom: 0;
}
これは、ページの一番下までdivを取ります。そして:
div.value_input2 {
display: table-cell;
vertical-align: bottom;
}
これは効果がありません。
私は、セルの底に整列する入力ボックスとボタンを取得するために何をする必要がありますどのようなここにJSFiddle
のコードを持っていますか?