Html 将一个 <div> 与表格顶部对齐，一个与表格底部对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/487289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align a <div> to the top, and one to the bottom of a table
提问by John Paul Jones
I'm having trouble with some vertical CSS positioning. I would like to create a page with the following layout:
我在一些垂直 CSS 定位方面遇到了问题。我想创建一个具有以下布局的页面：
B AAA
AAA
AAA
C AAA
A is a grid (table) of data B is aligned to the top of the grid C is aligned to the bottom of the grid
A 是数据的网格（表格） B 与网格顶部对齐 C 与网格底部对齐
How do I get B and C to align correctly?
如何让 B 和 C 正确对齐？
EDIT: Sorry for the confusion about Div/Table tags! I'm ideally looking to do this with pure CSS, but if it's a lot of work then I'll settle for dittodhole's solution of using a table.
编辑：很抱歉对 Div/Table 标签造成混淆！理想情况下，我希望使用纯 CSS 来完成此操作，但是如果工作量很大，那么我将满足于使用表的 dittodhole 解决方案。
回答by Chris
I just tested this (adds in a wrapper div):
我刚刚对此进行了测试（添加到包装器 div 中）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="screen">
#wrapper{ position: relative; }
#b, #c{ position: absolute; left: 0; width: 80px; background: #ccc; }
#a{ margin-left: 80px; }
#b{ top: 0; }
#c{ bottom: 0; }
</style>
</head>
<body>
<div id="wrapper">
<div id="b">Contents of B</div>
<table border="0" id="a">
<tr><th>Header</th><th>Header</th><th>Header</th></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
<div id="c">
Contents of C
</div>
</div>
</body>
</html>
divs C and B need to be given a fixed width, and absolutely positioned. The wrapper is given relative positioning to make this work. Table A is given a margin equal to the width of C & B.
div C 和 B 需要固定宽度，并且绝对定位。包装器被赋予相对定位来完成这项工作。表 A 的边距等于 C 和 B 的宽度。
I've not tested cross-browser, just Firefox 3.
我没有测试过跨浏览器，只是 Firefox 3。
回答by Andreas Niedermair
why so fishy - this is pretty easy:
为什么这么可疑 - 这很容易：
<table>
<tr>
<td style="vertical-align: top;">B</td>
<td rowspan="2">grid</td>
</tr>
<tr>
<td style="vertical-align: bottom;">C</td>
</tr>
</table>
回答by Chad
I wasn't able to find any solution to this problem that worked for me. The closest thing I found was a solution that only worked if you had only 1 row. I am using the ASP.NET Calendar Control and want a div at the bottom of each date cell. The solution I came up with was to have JQuery guess at the height of the biggest cell and individually set the margin-top for the bottom div to make it work. locationInfo is the to be moved to the bottom of each cell. num_events finds the number of entries listed above in the cell.
我无法找到对我有用的任何解决方案。我发现的最接近的事情是只有在只有 1 行时才有效的解决方案。我正在使用 ASP.NET 日历控件并希望在每个日期单元格的底部有一个 div。我想出的解决方案是让 JQuery 猜测最大单元格的高度，并单独设置底部 div 的 margin-top 以使其工作。locationInfo 是要移动到每个单元格底部的。num_events 查找单元格中上面列出的条目数。
var line_height = 24; // line height plus padding
$(document).ready(function () {
// find out the most events in one day
var most_events = 0;
$(".locationInfo").each(function () {
// get number of events in this cell
var parent_td = $(this).parent();
var num_events = parent_td.children().length - 2;
if (num_events > most_events) {
most_events = num_events;
}
});
//alert(most_events);
// loop through each (location info) div and reposition by setting margin-top
// this could be improved further by finding the most_events for each week instead of the whole month
$(".locationInfo").each(function () {
//$(this).css("top", 50);
parent_td = $(this).parent();
num_events = parent_td.children().length - 2;
$(this).css("margin-top", (5 + (most_events * line_height)) - (num_events * line_height));
});
});
回答by Chris
using some jQuery, I can get this working cross-browser (including IE6). A border is required on the wrapping div to get IE6 working (might be a hasLayout thing?). Div B can be a variable width, and everything should accomodate.
使用一些 jQuery，我可以让这个跨浏览器（包括 IE6）工作。包装 div 上需要边框才能使 IE6 正常工作（可能是 hasLayout 问题？）。Div B 可以是可变宽度，一切都应该适应。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="screen">
#wrapper{ position: relative; border: 1px solid #fff; }
#b, #c{ position: absolute; left: 0; background: #ccc; margin: 0; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
var b_width = $('#b').width();
var a_height = $('#a').height();
var c_height = $('#c').height();
var c_top = a_height - c_height;
$('#a').css({"margin-left": b_width + "px"});
$('#c').css({top: c_top + "px"});
})
</script>
</head>
<body id="">
<div id="wrapper">
<div id="b">Contents of B</div>
<table border="0" id="a">
<tr><th>Header</th><th>Header</th><th>Header</th></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
<div id="c">
Contents of C
</div>
</div>
</body>
</html>
回答by unigogo
This can be accomplished with pure div design using this grid layout generator. 4 rows and 4 columns. leave the 2nd and 3rd grid of the 1st column blank.
这可以通过使用此网格布局生成器的纯 div 设计来完成。4 行 4 列。将第一列的第二个和第三个网格留空。
回答by Juan Manuel De Castro
this is the solution:
这是解决方案：
<style type="text/css">
table { width:500px; border-collapse:collapse}
th, td { border:1px solid black; vertical-align: top;}
th { width:100px; }
td { background:#ccc; }
.wrap { position:relative; height:100%; padding-bottom:1em; background:#aaa; height:200px;}
.manage { text-align:right; position:absolute; bottom:0; right:0; }
p{ margin: 0 0 5px 0; }
</style>
<table>
<tr>
<th>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero.</th>
<td><div class="wrap">
<p><a href="http://www.pronexo.com">www.pronexo.com</a></p>
<div class="manage">Edit | Delete</div></div></td>
</tr>
<tr>
<th>Cras diam.</th>
<td><div class="wrap"><p>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero. Sed elementum. Praesent porta, tellus ut dictum ullamcorper, est ante condimentum metus, non molestie lorem turpis in sapien. Aenean id enim. Nullam placerat blandit ante. Aenean ac ligula.</p><div class="manage">Edit | Delete</div></div></td>
</tr>
</table>
