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>

Google Chromeで実行しました。右クリックして「要素の検査」を選択し、本文セクションをクリックしましたが（Chromeは本文全体を強調表示する必要があります）、セクションのみを強調表示しました#header。ページ全体が強調表示されないのはなぜですか?

4

3 に答える 3

0

フロートを「クリア」するのを忘れたためです。

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

これを最後のフローティング div の最後に追加します。

于 2013-04-09T09:02:58.953 に答える
0

それは、「要素がフローティングされると、ドキュメントの通常の流れから外れる」ためです。したがって、ブラウザにはフロート要素が通常のコンテンツに含まれていないため、強調表示されていないと思い<body>ます。

ところで、FirefoxのFirebugでも同じように動作します。

于 2013-04-09T09:03:32.770 に答える