我遇到了一些垂直CSS定位问题.我想创建一个具有以下布局的页面:
B AAA
AAA
AAA
C AAA
A是网格(表格),数据B对齐到网格C的顶部,与网格的底部对齐
如何让B和C正确对齐？
编辑:很抱歉有关Div/Table标签的混淆!理想情况下,我希望用纯CSS做到这一点,但是如果它有很多工作,那么我将满足于dittodhole使用表格的解决方案.
我刚测试了这个(添加了一个包装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>
div和C需要给定一个固定的宽度,并且绝对定位.包装器具有相对定位以使其工作.表A的边距等于C&B的宽度.
我没有测试跨浏览器,只测试Firefox 3.