gpt4 book ai didi

html - 将
对齐到顶部,一个对齐到表格的底部

转载 作者:搜寻专家 更新时间:2023-10-31 22:04:44 26 4
gpt4 key购买 nike

我在处理某些垂直 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>

divs C 和 B 需要被赋予一个固定的宽度,并且绝对定位。包装器被赋予相对定位以使其工作。表 A 的边距等于 C 和 B 的宽度。

我没有测试过跨浏览器,只测试过 Firefox 3。

关于html - 将 <div> 对齐到顶部,一个对齐到表格的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/487289/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com