html - 如何修复页脚随超链接图像移动

Question

This is the problem I've been having.我最近开始学习网络开发并开始制作自己的迷你游戏网站，但我遇到了页脚和超链接图像的问题，由于我是新手，尽管如此我还是无法解决问题在线寻找答案。

我遇到的问题是，当我将超链接图像添加到我希望游戏所在的页面时，页脚会从页面底部移动到图像所在的位置，然后页脚会变成超链接本身使其成为游戏所在页面之一的可点击链接，我想将图像放在旁边，用于“推荐游戏”，游戏本身位于页面中央。当我删除超链接图像时，此问题不再发生。任何反馈将不胜感激，谢谢。

HTML

    <aside1>
        <div class="container">
            <h1>Recommended Games</h1>
        </div>
    </aside1>

    <aside1 id="boxes">
        <div class="container">
            <div class="box">
            <a href="spaceinvader.html">
            <img src="img/spaceinvader.jpg">
            <h3>Space Invaders</h3>
        </div>
        <div class="box">
                <a href="hangman.html">
                <img src="img/hangman.jpg">
                <h3>Hangman</h3>
            </div>
        <div class="box">
                <a href="pacman.html">
                <img src="img/pacman.jpg">
                <h3>Pacman</h3>
            </div>
    </aside1>

    <footer>
        <p>ACI Games, Copyright &copy; 2019</p>
    </footer>

CSS

    aside1{
       width:20%;
       position:absolute;
       top:212px;
       bottom:60px;
       left:0px;
       border-left:6px solid;
       border-right:6px solid;
       border-color:aqua
    }

    aside1 h1{
       color:white;
       text-align:center;
    }

    footer{
       position: absolute;
       bottom:0;
       width:100%;
       height:60px;
       background:aqua;
       text-align:center;
       color:white;
   }

Answer 1

你需要关闭</a>标签。

这是更新后的 fiddle :

<aside1>
  <div class="container">
    <h1>Recommended Games</h1>
  </div>
</aside1>

<aside1 id="boxes">
  <div class="container">
    <div class="box">
      <a href="spaceinvader.html">
        <img src="img/spaceinvader.jpg"></a>
      <h3>Space Invaders</h3>
    </div>
    <div class="box">
      <a href="hangman.html">
        <img src="img/hangman.jpg"></a>
      <h3>Hangman</h3>
    </div>
    <div class="box">
      <a href="pacman.html">
        <img src="img/pacman.jpg"></a>
      <h3>Pacman</h3>
    </div>
</aside1>

<footer>
  <p>ACI Games, Copyright &copy; 2019</p>
</footer>