0

次の点を考慮してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            .box-2 { position: absolute }

            /* Styling */
            .box-1 { background-color: #ccc; width: 3em  }
            .box-2 { background-color: #ddd; width: 3em  }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <div class="box-1">1</div>
                </td>
                <td>
                    <div class="box-2">2</div>
                </td>
            </tr>
        </table>
    </body>
</html>

これは次のようにレンダリングされます。

ボックス 2 はボックス 1 よりも下 http://img.skitch.com/20100512-cr58jx4p5k37n4fcm6cn8h6dde.png

ボックス 2 がボックス 1 と同じレベルにないのはなぜですか? position: absolute、no、topまたはがあるleftため、その位置に影響を与えずに通常のフローから除外されると予想されます。(CSS を変更して「問題」を修正しようとしているのではなく、ブラウザがこのボックスをこのようにレンダリングする理由を理解しようとしていることに注意してください。)

4

1 に答える 1

2

tdネイティブを持っているからですvertical-align:middle。.box-2スペースを占有しなくなったため、上部はセルの中央に設定されます。valignまたはvertical-alignをtdに設定するtopと、期待どおりに動作します。

于 2010-05-12T19:54:54.640 に答える