1

我正在使用下面的 HTML：我有一个高度可变的表格。高度由第一个 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>
4

1 回答 1

2

你的意思是这样的吗？ http://jsfiddle.net/ERPSA/ 使用 position:relative 在父母的 td 和 position:absolute 在孩子的 tds ...这使孩子们使用 td 作为他们位置的参考。

于 2012-07-25T18:06:02.963 回答