Question

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

由于第2和第3个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>

Answer 1

你是说这样的意思吗？ http://jsfiddle.net/ERPSA/ 它是使用position：relative在父母的td和position上完成的：在孩子的tds上绝对... 这使得孩子们使用td作为他们位置的参考。

将div顶部/底部对齐可变高度td

1 个答案: