У меня есть страница, состоящая из таблицы с двумя столбцами, отображающей информацию о событии с помощью кнопки "Изменить" и "Удалить". Информация о событии имеет разную высоту, но я хочу, чтобы кнопки были внизу, независимо от высоты ячейки.
<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>
Поместите div, содержащий кнопки абсолютно и в нижней части ячейки таблицы, которые должны располагаться относительно.
td {
position:relative;
}
.buttons {
position:absolute;
bottom:0;
}
Найден ответ в нижней части вертикального выравнивания для ссылки внутри ячейки таблицы. Установив 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>