Question

所以我正在编写一本在我的教科书的每一章末尾建立自己的作业，我的教授为标题图片和页脚没有正确对齐我页面的主要内容，但我似乎无法弄清楚如何解决这个问题。

body {
    background-color: #3F2860;
    color: #3F2860;
    font-family: Verdana, Arial, sans-serif;
    }

    header {
    background-image: url(lilyheader.jpg);
    height: 150px;
    background-repeat: repeat-y;
    position: relative;
    }

    h1 {
    padding-top: 50px;
    padding-left: 2em;
    }

    nav {
    font-weight: bold;
    padding: 1em;
    float: left;
    width: 160px;
    }


    nav a {
    text-decoration: none;
    display: block;
    text-align: center;
    font-weight: bold;
    border-style: outset;
    border-color: #CCCCCC;
    padding: 1em;
    margin-bottom: 1em;
    }

    nav a:link {color: #3f2860;}
    nav a:visited {color: #497777;}
    nav a:hover {color: #a26100; border: 3px inset #333333;}

    nav ul { 
    list-style-type: none;
    padding-left: 0; 
    }

    .studio {
    font-style: italic;
    }

    footer {
    background-color: #9BC1C2;
    font-size: .60em;
    font-style: italic;
    text-align: center;
    padding: 1em;
    }

    #wrapper {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    background-color: #F5F5F5;
    min-width: 1200px;
    max-width: 1480px;
    }

    main {
    padding-left: 2em;
    padding-right: 2em;
    display: block;
    margin-left: 170px;
    padding-top: 1em;
    }


    * {
    box-sizing: border-box;
    }

    .floatleft {
    float: left;
    margin-right: 4em;
    }

    .clear {
    clear: both;
    }

    header,nav,main,footer {display: block;}

<head>
    <meta charset="UTF-8">
    <title>Path of Light Yoga Studio</title>
    <link rel="stylesheet" type="text/css" href="yoga.css">
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
    </script>
    <! [endif]-->
    </head>

    <header>
    <h1>Path of Light Yoga Studio</h1>
    </header>
    <main>
    <div id='wrapper'>

    <nav>
    <ul>
    <li><a href = "index.html">Home</a></li> 
    <li><a href = "classes.html">Classes</a></li> 
    <li><a href = "schedule.html">Schedule</a></li>
    <li><a href = "contact.html">Contact</a></li>
    </ul>
    </nav>
 
    <img class='floatleft' src='yogadoor2.jpg' alt="Yoga Door">
    
    <h2>Find Your Inner Light</h2>
    <p><span class="studio">Path of Light Yoga Studio</span> provides all levels of yoga practce in a tranquil, peaceful envirionment. Whether you are new to yoga or an experienced practitioner, our dedicated instructors can develop a practice to meet your needs. Let your inner light shine at the <span class="studio">Path of Light Yoga Studio</span>.</p>
 
    <ul>
    <li>Hatha, Vinyasa, and Restorative Yoga Classes</li>
    <li>Drop-ins welcome</li>
    <li>Mats, blocks, and blankets provided</li>
    <li>Relax in our Serenity Lounge before or after your class</li>
    </ul>

    <div class='clear'>
    Path of Light Yoga Studio<br>
    612 Serenity Way<br>
    El Dorado, CA 96162<br><br>
    888-555-5555<br><br><br>
    </div>
    </div>
    <footer>   
    Copyright &copy; 2016 Path of Light Yoga<br>
    </footer>

    </main>

我认为我格式正确（第一次使用此网站）。

Answer 1

好吧......所以你的CSS存在很多问题，你也有无效的HTML。 HTML需要一个body标签......你没有。浏览器可能会添加它，因为它是他们所做的事情。他们采用无效的HTML并猜测开发人员正在尝试构建什么。

首先，请记住，所有html页面的基础如下：

<html>
    <head>
        <title>title</title>
    </head>
    <body>

    </body>
</html>

接下来，CSS上发生了很多事情。我看到的最重要的事情是花车。浮动是一种容易弄得一团糟的方法。他们有用途;但是，现在通常有一种更好的方式。

现在从根本上看你的对齐问题......

根据我的理解，您希望页眉和页脚的宽度与主要内容的宽度相同，并且与屏幕左侧的距离相同。

您设置主要内容以使用#wrapper div并对其进行对齐。这可以。问题是如何设置填充更多是针对页面和页脚粘贴到页面顶部/底部的网页，并完全填满宽度。

<html>
    <head>
        <title>title</title>
    </head>
    <body>
        <header>
        </header>
        <main>
            <div id="wrapper">
                //This guy had the common margin auto with a width percentage.
            </div>
            <footer>
            </footer>
        </main>
    </body>
</html>

在包装器上设置页面对齐意味着它不能真正应用于页脚和页眉。它会变得非常混乱。当然，如果页眉和页脚占据页面顶部和底部的所有宽度，这不是问题。

我该怎么做才能解决这个问题？

首先，让我们清理你的HTML。将页面分成3个部分会更有意义。标题，主页，页脚。现在你的页脚在你的主要内部。

所以我做的是：

<html>
    <head>
        <title>title</title>
    </head>
    <body>
        <header>
        </header>
        <main>
            <div id="wrapper">
                //This guy had the common margin auto with a width percentage.
            </div>
        </main>
        <footer>
        </footer>
    </body>
</html>

接下来，我移动了对齐方式。所以不要有这个规则：

#wrapper {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    background-color: #F5F5F5;
}

我有这些规则：

header, main, footer {
  width: 80%; 
  margin-right: auto;
  margin-left: auto;
}

#wrapper{
    background-color: #F5F5F5;
}

通过这样做，我们将对齐规则应用于body标签内的3个元素。我不适用于身体标签本身;因为，我们应该避免改变身体的宽度。

最后，你在主元素上也有一些奇怪的填充：

main {
    padding-left: 2em;
    padding-right: 2em;
}

我不知道为什么会这样;但是，我把它移到了身体上。

body {
    padding-left: 2em;
    padding-right: 2em;
}

将它放在身体上会影响页眉，主页和页脚。

这些是修复对齐的更改。除了这些更改，我删除了可能导致问题的各种规则和声明......我不相信这些会对您的网页产生任何影响;但是，如果出于某种未知原因需要它们，您应该查看您的要求并确保一切仍然正确。

以下是JSFiddle

需要帮助将我的页眉/页脚与我的主体对齐

1 个答案: