将元素与HTML表格单元格的底部对齐

Question

我在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方法：

div.value_input {
    position: absolute;
    bottom: 0;
}

这只是将div放到页面底部。和：

div.value_input2 {
    display: table-cell;
    vertical-align: bottom;
}

哪个没有效果。

我在JSFiddle中有代码

我需要怎么做才能使输入框和按钮与单元格的底部对齐？

Answer 1

您需要将父元素位置设置为相对position:relative，以便使用绝对定位。这是一个工作片段。

table {
    		border-collapse: collapse;
		}

		table, th, td {
		    border: 2px solid black;
        position:relative;
		}

		div.value_input {
			position: absolute;
      bottom: 0;
		}
    
    div.value_input2 {
      position:absolute;
      bottom:0;
    }

<table>
		<tr>
			<th style="background-color: #007CE2">
				Test
			</th>
			<th style="background-color: #E54040">
				Test
			</th>
		</tr>
		<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>

		<tr>
			<th style="background-color: #8BC34A">
				Test
			</th>
			<th style="background-color: #FF9800">
				Test
			</th>
		</tr>
		<tr>
			<td style="background-color: #8BC34A">
				<p id="t3_list"></p>
				<input type="text" name="t3_input" id="t3_input">
				<button>
					Add
				</button>
			</td>
			<td style="background-color: #FF9800">
				<p id="t4_list"></p>
				<input type="text" name="t4_input" id="t4_input">
				<button>
					Add
				</button>
			</td>
		</tr>
	</table>