Question

我有以下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部分。为什么不突出整个页面？

Answer 1

因为你忘了'清除'花车。

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

在最后一个浮动div的末尾添加它。

Answer 2

因为“when an element is floated it is taken out of the normal flow of the document”。所以我猜浏览器不会将浮动元素包含在<body>的正常内容中，因此它们不会突出显示。

它在Firefox中的Firebug中表现相同，BTW。

Answer 3

body {
     margin: auto;
     width: 960px;
     height:750px;
     font-family: Helvetica, sans-serif;
     font-size: 16px;
}

指定身高。以上应解决您的问题。

身体只包括标题？

3 个答案: