我有一个页面，其中包含一个包含两列的表格，其中显示了带有“编辑”和“删除”按钮的事件信息。事件信息具有不同的高度，但我希望按钮位于底部而不管单元格高度。
<html>
<body>
<form id="form1" name="form1">
<!--input type="hidden" name="formType" id="formType" value="" />
<input type="hidden" name="inpMonth" id="inpMonth" value="10" />
<input type="hidden" name="inpDay" id="inpDay" value="" /-->
</form>
<div>
<h1 style="background-color:darkblue; color: white; width:100%;text-align:center;">NOV 27, 2013</h1>
</div>
<div style="text-align: center;">
<table style="width: 95%; border: thin black solid; border-collapse: collapse;">
<tr>
<td style="width:50%; border-right: thin black solid; border-bottom: thin black solid;
border-collapse: collapse;">
<br>
<div style="margin-top: 10px; vertical-align: top;height: 100%;">
<label style="width: 100%;padding-left: 25px;">Name: Job Fair</label>
<label style="width: 100%;padding-left: 25px;">Start Time: 10:00AM</label>
<label style="width: 100%;padding-left: 25px;">End Time: 2:00PM</label>
<label style="width: 100%;padding-left: 25px;">
Description: Job Fair for Veterans. Description: Job Fair for Veterans. Description: Job Fair for Veterans. Description: Job Fair for Veterans.
</label>
<label style="width: 100%;padding-left: 25px;">Location: Henry B. Gonzales Convention Center</label>
</div>
<div style="padding-left:25%;" >
<button style="vertical-align: bottom;">Edit</button>
<button>Delete</button>
</div>
<br>
</td>
<td style="width:50%; border-right: thin black solid; border-bottom: thin black solid;
border-collapse: collapse;">
<br>
<div style="margin-top: 10px; vertical-align: top;height: 100%;">
<label style="width: 100%;padding-left: 25px;">Name: Job Fair</label>
<label style="width: 100%;padding-left: 25px;">Start Time: 10:00AM</label>
<label style="width: 100%;padding-left: 25px;">End Time: 2:00PM</label>
<label style="width: 100%;padding-left: 25px;">
Description: Job Fair for Veterans. Description: Job Fair for Veterans. Description: Job Fair for Veterans. Description: Job Fair for Veterans.Description: Job Fair for Veterans. Description: Job Fair for Veterans.Description: Job Fair for Veterans. Description: Job Fair for Veterans.Description: Job Fair for Veterans. Description: Job Fair for Veterans.
</label>
<label style="width: 100%;padding-left: 25px;">Location: Henry B. Gonzales Convention Center</label>
</div>
<div style="padding-left:25%;" >
<button style="vertical-align: bottom;">Edit</button>
<button>Delete</button>
</div>
<br>
</td>
</tr>
<tr>
<td style="width:50%; border-right: thin black solid; border-bottom: thin black solid;
border-collapse: collapse;">
<br>
<div style="margin-top: 10px; vertical-align: top;height: 100%;">
<label style="width: 100%;padding-left: 25px;">Name: Job Fair</label>
<label style="width: 100%;padding-left: 25px;">Start Time: 10:00AM</label>
<label style="width: 100%;padding-left: 25px;">End Time: 2:00PM</label>
<label style="width: 100%;padding-left: 25px;">
Description: Job Fair for Veterans. Description: Job Fair for Veterans. Description: Job Fair for Veterans. Description: Job Fair for Veterans. Description: Job Fair for Veterans. Description: Job Fair for Veterans. Description: Job Fair for Veterans. Description: Job Fair for Veterans. Description: Job Fair for Veterans. Description: Job Fair for Veterans.
</label>
<label style="width: 100%;padding-left: 25px;">Location: Henry B. Gonzales Convention Center</label>
</div>
<div style="padding-left:25%;" >
<button style="vertical-align: bottom;">Edit</button>
<button>Delete</button>
</div>
<br>
</td>
<td style="width:50%; border-right: thin black solid; border-bottom: thin black solid;
border-collapse: collapse;">
<br>
<div style="margin-top: 10px; vertical-align: top;height: 100%;">
<label style="width: 100%;padding-left: 25px;">Name: Job Fair</label>
<label style="width: 100%;padding-left: 25px;">Start Time: 10:00AM</label>
<label style="width: 100%;padding-left: 25px;">End Time: 2:00PM</label>
<label style="width: 100%;padding-left: 25px;">
Description: Job Fair for Veterans. Description: Job Fair for Veterans. Description: Job Fair for Veterans. Description: Job Fair for Veterans.
</label>
<label style="width: 100%;padding-left: 25px;">Location: Henry B. Gonzales Convention Center</label>
</div>
<div style="padding-left:25%;" >
<button style="vertical-align: bottom;">Edit</button>
<button>Delete</button>
</div>
<br>
</td>
</tr>
<td colspan="2" style="border: thin black solid;text-align:center; background-color: lightgreen;">
<br>
<form>
<label style="width:100px; text-align: right;">Event Name:</label> <input type="text" style="width:250px;" value="" /><br>
<label style="width:100px; text-align: right;">Start Time:</label> <input type="text" style="width:250px;" value="" /><br>
<label style="width:100px; text-align: right;">End Time:</label> <input type="text" style="width:250px;" value="" /><br>
<label for="taDescription" style="width:100px; text-align: right;">Description:</label> <textarea id="taDescription" rows="3" style="width:250px; vertical-align:middle;"></textarea> <br>
<label style="width:100px; text-align: right;">Location:</label> <input type="text" style="width:250px;" value="" /><br>
<br>
<input type="submit" style="margin-left: 25%; margin-right:25%;" value="Add"/>
</form>
</td>
</table>
</div>
</body>
</html>
答案 0 :(得分：1)
将包含按钮的div绝对放在表格单元格的底部，该单元格应相对定位。
td {
position:relative;
}
.buttons {
position:absolute;
bottom:0;
}
<强> jsFiddle example
答案 1 :(得分：0)
在Vertical align bottom for a link inside a table cell找到答案。通过将td设置为“position：relative”并将包含按钮的div设置为“position：absolute; bottom：0”，它将按钮移动到我想要的位置。
工作html：
<td style="width:50%; border-right: thin black solid; border-bottom: thin black solid;
border-collapse: collapse; position: relative;">
<br>
<div style="margin-top: 10px; vertical-align: top;height: 80%;">
<label style="width: 100%;padding-left: 25px;">Name: Job Fair</label>
<label style="width: 100%;padding-left: 25px;">Start Time: 10:00AM</label>
<label style="width: 100%;padding-left: 25px;">End Time: 2:00PM</label>
<label style="width: 100%;padding-left: 25px;">
Description: Job Fair for Veterans. Description: Job Fair for Veterans. Description: Job Fair for Veterans. Description: Job Fair for Veterans.
</label>
<label style="width: 100%;padding-left: 25px;">Location: Henry B. Gonzales Convention Center</label>
</div>
<div style="position: absolute; bottom:15;text-align: center; width: 100%;">
<button style="vertical-align: bottom;">Edit</button>
<button style="vertical-align: bottom;">Delete</button>
</div>
</td>