Question

任何人都可以帮助我吗？我想弄清楚为什么2 div彼此重叠。

这就是它的外观，我无法将页脚放在白色框体下。

我的身体代码是：

<body style = 'background-image: url("/images/sitebg.jpg")'>
<?php include 'header.php'; ?>
<div class="mainmenu">
    <div class="dropdown">
        <button class="dropbtn">Menu</button>
        <div class="dropdown-content">
            <a href="#">Blog</a>
            <a href="#">Recipes</a>
            <a href="#">Gameplay Footage</a>
        </div>
    </div>
</div>
<div id="main" class="site-main">

</div>
<div>
    <?php include 'footer.php'; ?>
</div>
</body>

我的页脚CSS是：

.site-footer {
        float: left;
        display: block;
        padding: 3.5em;
    }

    c {color:black;font-family:"Agency FB";font-size:16px; position: relative;}
    lo1 {color:black;font-family:"Agency FB";font-size:22px;text-shadow: 2px 2px Orange;text-align:"center";}
    .site-main {

    margin-bottom: 0px;

}

    .mainmenu {
  display: block;
  background-color: white;
  margin-bottom: 15px; 
  margin-left: 0px;
  margin-top: 0px;
  border: 2px solid black;

}

页脚代码是：

        </div>
    <div class="site-footer"
        <center><div><c>Powered by</c> <lo1><a href="" target="_blank">Phoenix78</lo1> <c>2017 ©</c></div></center>
    </div>
</div>

标题代码是：

    <html>
<head><link rel="stylesheet" href="style.css"></head>
<body class="body">
<header>
    <div class="container">
        <center><h1></h1>
    </div>
</header>
</body>
</html>

按照建议更改代码后，设计混合了，我得到以下内容： screenshot2

但我猜它可以通过CSS调整来修复

我将不胜感激任何帮助。感谢。

Answer 1

因此，根据评论，您的主HTML文件应包含：

<!DOCUMENT html>
<html>
<head>
    <?php include 'header.php'; ?>
</head>
<body style = 'background-image: url("/images/sitebg.jpg")'>
<div class="mainmenu">
    <div class="dropdown">
        <button class="dropbtn">Menu</button>
        <div class="dropdown-content">
            <a href="#">Blog</a>
            <a href="#">Recipes</a>
            <a href="#">Gameplay Footage</a>
        </div>
    </div>
</div>
<div id="main" class="site-main">

</div>
<div class="site-footer">
    <?php include 'footer.php'; ?>
</div>
</body>
</html>

您的header.php文件仅输出以下HTML：

<link rel="stylesheet" href="style.css">
<title>Title</title>

您的footer.php文件仅输出以下HTML：

<span class="c">Powered by</span> <span class="lo1"><a href="" target="_blank">Phoenix78</a></span> <span class="c">2017 ©</span>

但是，当然，如果你不动态加载东西，那么最后两个是完全没必要的，因此你应该考虑只复制主文件中的HTML而不是加载文件。

这意味着您最好的选择就是：

<!DOCUMENT html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
</head>
<body style = 'background-image: url("/images/sitebg.jpg")'>
<div class="mainmenu">
    <div class="dropdown">
        <button class="dropbtn">Menu</button>
        <div class="dropdown-content">
            <a href="#">Blog</a>
            <a href="#">Recipes</a>
            <a href="#">Gameplay Footage</a>
        </div>
    </div>
</div>
<div id="main" class="site-main">

</div>
<div class="site-footer">
    <span class="c">Powered by</span> <span class="lo1"><a href="" target="_blank">Phoenix78</a></span> <span class="c">2017 ©</span>
</div>
</body>
</html>

如果它没有解决任何问题，那么我们需要继续进行更多的CSS修改，但就此而言，这应该可以解决任何HTML问题。

注意：<c>和<lo1>不是HTML标记（或者至少我从未听说过它们）。如果需要对这些元素进行样式化，请使用类。

修改

以下是恢复原始HTML / CSS工作风格所需的CSS修改：

.site-footer { text-align: center; float: left; display: block; padding: 3.5em; } .c { color: black; font-family: "Agency FB"; font-size: 16px; position: relative; } .lo1 { color: black; font-family: "Agency FB"; font-size: 22px; text-shadow: 2px 2px Orange; text-align: center; } .site-main { margin-bottom: 0; } .mainmenu { display: block; background-color: white; margin-bottom: 15px; margin-left: 0; margin-top: 0; border: 2px solid black; }

Answer 2

中心未正确关闭也被弃用了，应该避免使用

<html>
<head><link rel="stylesheet" href="style.css"></head>
**<body class="body">**
<header>
    <div class="container">
        **<center>**<h1></h1>
    </div>
</header>

<强> 此外，您的代码在文档上放置了两个正文标记

php div与页脚重叠

2 个答案: