0

我有以下 HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Contest Coding</title>
        <meta charset = 'utf-8'>
        <meta name = 'description' content = 'The free programming competition for everyone'>
        <meta name = 'keywords' content = 'programming competition, coding competition, programming contest, coding contest, progrramming puzzles, coding puzzles, contestcoding, contest coding, c, c#, c++, python, ruby, java, javascript, php, haskell, perl, programming, coding'>
        <meta name = 'author' content = 'Lewis Cornwall'>
        <style type = 'text/css'>
            body {
                margin: auto;
                width: 960px;
                font-family: Helvetica, sans-serif;
                font-size: 16px;
            }
            #header {
                text-align: center;
            }
            #leaderboard {
                float: left;
            }
            #leaderboard table {
                width: 280px;
            }
            #puzzles {
                float: right;
            }
            #puzzles table {
                width: 640px;
            }
            .view_full {
                line-height: 2em;
            }
            h1 {
                font-size: 60px;
                line-height: .5em;
            }
            table {
                border-collapse: collapse;
                background-color: lightgrey;
            }
            table, th, td {
                padding: 10px;
                border: 1px solid #000;
                text-align: left;
            }
            a {
                color: #000;
                text-decoration: none;
            }
            a:hover {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <div id = 'header'>
            <h1>CONTEST CODING</h1>
            <p>The free programming competition for everyone</p>
        </div>
        <div id = 'leaderboard'>
            <h2>Leaderboard</h2>
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Points</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <a href = ''>Ed Southall</a>
                        </td>
                        <td>20</td>
                    </tr>
                    <tr>
                        <td>
                            <a href = ''>Mark Bishop</a>
                        </td>
                        <td>20</td>
                    </tr>
                    <tr>
                        <td>
                            <a href = ''>Krishna Teja</a>
                        </td>
                        <td>18</td>
                    </tr>
                </tbody>
            </table>
            <a href = '' class = 'view_full'>View full leaderboard &raquo;</a>
        </div>
        <div id = 'puzzles'>
            <h2>Latest Puzzles</h2>
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Solved By</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <a href = ''>The Truck Driver - Click to View and Solve</a>
                        </td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td>
                            <a href = ''>The Eight Queens - Click to View and Solve</a>
                        </td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td>
                            <a href = ''>Palindromic Primes - Click to View and Solve</a>
                        </td>
                        <td>3</td>
                    </tr>
                </tbody>
            </table>
            <a href = '' class = 'view_full'>View all puzzles &raquo;</a>
        </div>
    </body>
</html>

我在谷歌浏览器上运行它。我右键单击，选择“检查元素”，单击正文部分（因此 Chrome 应该突出显示整个正文），但它只突出显示了该#header部分。为什么它不突出显示整个页面？

4

3 回答 3

0

这是因为“当一个元素浮动时，它会脱离文档的正常流程”。所以我猜浏览器不包含浮动元素的正常内容，<body>因此它们没有突出显示。

它在 Firefox 中的 Firebug 中的行为相同，顺便说一句。

于 2013-04-09T09:03:32.770 回答
0 
body {
     margin: auto;
     width: 960px;
     height:750px;
     font-family: Helvetica, sans-serif;
     font-size: 16px;
}

指定身体高度。以上应该可以解决您的问题。

于 2013-04-09T09:11:11.277 回答
0

因为你忘了“清除”花车。

<div style="clear: both;"></div>

将此添加到最后一个浮动 div 的末尾。

于 2013-04-09T09:02:58.953 回答