1

以下の HTML を使用しています。高さが可変のテーブルがあります。高さは、最初の TD コンテンツによって設定されます。次の TD では、2 つの div が必要です。1 つは上に揃え、もう 1 つは下に揃えます。

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>
4

1 に答える 1

2

Do you mean something like this ? http://jsfiddle.net/ERPSA/ It's done using position:relative on the parent's td and position:absolute on the childs tds ... this make the children using the td as reference for their position.

于 2012-07-25T18:06:02.963 に答える