Html 当上面的div扩展时按下div？

制作一个单页网站。HTML如下所示

<!-- Landing Page-->
    <div id="landing">
        <img src="front.png" alt="Cover Page">
    </div>
    <!-- About -->
    <div id="page1">
      <a id="about"></a>
        <img src="Who.png" alt="About Me">
        <p>
            xxx
        </p>
    </div>

    <!-- Work -->
    <div id="page2">
      <a id="portfolio"></a>
        <div id="container">
            <a class="fancybox" href="portfolio1.jpg" title="'Consumed' </br>Digital/Print Work"><img src="portfolio1s.png"/></a>
</div>
    </div>

    <!-- Contact -->
    <div id="page3">
      <a id="contact"></a>
        <img src="Contact.png" alt="Contact Information">
        <p>
            xxx
        </p>
    </div>
</body>

---

我注意到的第一件事是，您没有关闭

div#container

div。这只是一个拼写错误吗？啊，是的，它是一个拼写错误。我在删除图像链接时无意中删除了它。请尝试创建一个jsfiddle.net并重新创建您的问题，然后附加站点的布局图像@axel中有一个错误，谢谢您的发现！我是新手，所以我在这里和那里犯了很多错误

#container
{
padding:50px;
display:table-cell;
vertical-align:center;
width:auto;
}

#container a img
{
padding:10px;
opacity:1.0;
filter:alpha (opacity=100); /*for >IE8 */
}

#page1 img 
{
display:block;
margin-left:auto;
margin-right:auto;
width:400px;    
position:relative;
top:15px;
}

#page2 {
height:1200px;
font-family: Arial, sans-serif;
font-weight: bold;
color:purple;
}

#page3 {
height:1200px;
font-family: Arial, sans-serif;
font-weight: bold;
color:red;
}

#page3 img
{
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:-20px;
width:400px;
position:relative;
top:15px;
}