gpt4 book ai didi

html - 在可变高度 td 中对齐 div 顶部/底部

转载 作者:行者123 更新时间:2023-11-28 13:31:13 26 4
gpt4 key购买 nike

我正在使用下面的 HTML:我有一张高度可变的 table 。高度由第一个 TD 内容设置。在接下来的 TD 中,我想要 2 个 div。一个对齐顶部,另一个对齐底部。

它似乎不起作用,因为第二个和第三个 TD 没有明确的高度。

我正在寻找一个纯 HTML/CSS 的解决方案(不用 JS 设置高度)

感谢您的帮助。

<html>
<head>
<title></title>
<style>
div {
border: 1px solid red;
}
td.container {
position: relative;
}
td.container div.a {
position: absolute;
top: 0;
}
td.container div.b {
position: absolute;
bottom: 0;
}

</style>
</head>
<body>
<table border="1">
<tr>
<td><div>aasd asdas dasd<br />asd asdasdb<br />asd asdc<br /></div></td>
<td class="container"><div class="a">a</div><div class="b">b</div></td>
<td class="container"><div class="a">a</div><div class="b">b</div></td>
</tr>
<tr>
<td><div>aasd asdas dasd<br />aasd asdas dasd<br />aasd asdas dasd<br />aasd asdas dasd<br />asd asdasdb<br />asd asdc<br /></div></td>
<td class="container"><div class="a">a</div><div class="b">b</div></td>
<td class="container"><div class="a">a</div><div class="b">b</div></td>
</tr>
</table>
</body>
</html>

最佳答案

你的意思是这样的吗? http://jsfiddle.net/ERPSA/这是使用 position:relative 在 parent 的 td 和 position:absolute 在 child 的 tds ...这让 children 使用 td 作为他们位置的引用。

关于html - 在可变高度 td 中对齐 div 顶部/底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11655767/

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