Question

我刚刚更改了我的容器div标签以自动扩展高度，但现在我有一个边框问题，它只在页面的顶部可见，我需要它来显示所有周围，代码页面如下：

<!doctype html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<div id="container" style="width:500px; border: 2px solid black; margin:auto">

<?php include "header.php"; ?>

<div id="content" style="background-color:#EEEEEE; clear:both; width:500px; float: left">
<p align="center"><b>Quiz 1</b></p>
// There is some more code in the page
</div>

<?php include "footer.php"; ?>

</div>
</body>
</html>

的header.php：

<div id="header" style="background-color:#FFA500; width:500px; clear:both; height:75px; float: left" align="center">
    <h1>Quiz Name</h1>
</div>

footer.php：

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center; width:500px; height:25px; float: left">
    Copyright/Disclaimer
</div>

Answer 1

你的主要问题是一切都在浮动。您需要清除那个容器div的浮动元素才能正确显示。一种方法是在容器的div之前添加清算</div>：<div style="clear:both;"></div>

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

Answer 2

尝试在</body>之前添加此代码：

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

页面边框无法正常显示

2 个答案: