Question

为什么其他内容会获得页脚的背景？ Chrome说页面上的所有内容都是页脚div的一部分... wtf我做错了吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

content="text/html; charset=UTF-8" />

<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
  padding-left:10px;background: #EEE;color: #79B30B}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#container{width:700px;margin:0 auto}
div#content{float:right;width:500px}
div#navigation{float:left;width:200px}
div#extra{clear:both;width:100%}
</style>

<title>Kockums</title>

</head>

<body>

<div id="container">

<div id="header">

<table>

<tr>

<td><a href="http://intranet/">INTRAN&Auml;T</a></td>

<td><a href="http://www.google.com/">INTERNET</a></td>

<td><a href="index.php">RITNINGSARKIV</a></td>

</tr>

</table>

</div>

<div id="wrapper">

<div id="navigation">


<div class="menu">

<a href="?page=add_drawing "title="L&auml;gg till en ny ritning"

class="menu">L&auml;gg till ritning</a>

</div>

</div>

<div id="content">



<div class="text">

<form id="signin" name="signin" action="index.php" method="post">

<fieldset class="signin">

<legend>Logga in</legend>

<table width="250">

<tr>

<td width="120"><label for="username">Anv&auml;ndarnamn:</label></td>



<td width="130" align="right"><input type="text" name="username" id="username"

size="15" /></td>

</tr>

<tr>

<td colspan="2" align="right"><input type="submit" value="Logga in" /></td>

</tr>

</table>

</fieldset>

</form>

</div>

</div>

</div>

<div id="footer">

<table width="100%">

<tr>

<td class="text">Footer goes here</td>

</tr>

</table>

</div>

</div>

</body>

</html>

Answer 1

尝试用以下内容替换页脚样式：

div#footer{
    background: #333;
    color: #FFF;
    float: left;
    width: 100%;
}

并添加样式：

div#wrapper{
    float:left;
}

<强>为什么吗

至于为什么，我不完全确定底层的w3c标准是什么，但我知道如何使用它：）

当您检查包装器（在铬中检查元素）时，您可以看到它没有高度。然后页脚位于标题下方，内联是包装器和页脚的内容，页脚div作为背景。通过浮动你的元素并给它们一个宽度，它们现在变成了块本身并且会浮动。由于没有足够的空间可以水平浮动，所以它们将被放置在彼此之下。

Answer 2

我认为你的DIV标签不匹配。另一个答案可能会直观地解决问题，但HTML仍然存在。忘记关闭标签时，基于DIV的布局会爆炸。我使用HTML Tidy来修复它：

<div id="container">
    <div id="header">
        <table>
            <tr>
                <td>
                    <a href="http://intranet/">INTRANÄT</a>
                </td>
                <td>
                    <a href="http://www.google.com/">INTERNET</a>
                </td>
                <td>
                    <a href="index.php">RITNINGSARKIV</a>
                </td>
            </tr>
        </table>
    </div>
    <div id="wrapper">
        <div id="navigation">
            <div class="menu">
                <a href="?page=add_drawing" title="Lägg till en ny ritning" class="menu">Lägg till ritning</a>
            </div>
        </div>
        <div id="content">
            <div class="text">
                <form id="signin" name="signin" action="index.php" method="post">
                    <fieldset class="signin">
                        <legend>Logga in</legend>
                        <table width="250">
                            <tr>
                                <td width="120">
                                    <label for="username">Användarnamn:</label>
                                </td>
                                <td width="130" align="right">
                                    <input type="text" name="username" id="username" size="15" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" align="right">
                                    <input type="submit" value="Logga in" />
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
    <div id="footer">
        <table width="100%">
            <tr>
                <td class="text">
                    Footer goes here
                </td>
            </tr>
        </table>
    </div>
</div>

Div似乎封闭了页面的其他部分

2 个答案: