只有最后一个 href 有效

Question

我正在使用 HTML 和 CSS 构建一个网站。我正在尝试将 4 个图像包含在一个白色矩形中，当这些图像被单击时，它会将您带到页面的另一部分。

遗憾的是，只有 4 张图片中的最后一张真正将您带到页面的其他部分。其他3个甚至无法点击。如果我删除最后一张图片和其中包含的 div class，则 "new" 最后一张图片现在可以使用，即使它以前没有工作。

我很确定这是一个 CSS 问题，因为当我注释掉矩形 div 的 CSS 代码时，所有图像都是工作链接（尽管它们是由于其父 class 的 CSS 代码被注释掉而变得混乱）。

这是矩形 class 的 CSS 代码以及其中包含的图像：

#rectangle {
  background: white;
  width: 1000px;
  height: 500px;
  position: absolute;
  left: 500px;
  top: 200px;
  text-align: center;
}

#rectangle h1 {
  font-size: 50px;
  position: relative;
  top: 10px;
}

#rectangle .hardware {
  position: relative;
  top: 50px;
  right: 340px;
}

#rectangle .software {
  position: relative;
  bottom: 200px;
  right: 100px;
}

#rectangle .config {
  position: relative;
  bottom: 450px;
  left: 120px;
}

#rectangle .code {
  position: relative;
  bottom: 700px;
  left: 350px;
}

<div id="rectangle">
  <h1>Welcome to the docs.</h1>
  <h3>Learn how to build your own Olympia</h3>

  <div class="hardware">
    <a href="hardware.html"><img src="../assets/img/hardware.png" height="200px" width="200px" /></a>
    <p><b>Hardware</b></p>
  </div>

  <div class="software">
    <a href="software.html"><img src="../assets/img/software.png" height="200px" width="200px" /></a>
    <p><b>Software</b></p>
  </div>

  <div class="config">
    <a href="config.html"><img src="../assets/img/gear.png" height="200px" width="200px" /></a>
    <p><b>Config</b></p>
  </div>

  <div class="code">
    <a href="code.html"><img src="../assets/img/code.png" height="200px" width="200px" /></a>
    <p><b>Code</b></p>
  </div>
</div>

有什么建议吗？谢谢！

Answer 1

改变

 position:relative;

和

 display:inline-block;

像这样：

    #rectangle .software {
       /*           position: relative;*/
        display: inline-block;
        bottom: 200px;
        right: 100px;
    }

    #rectangle .config {
    /*          position: relative;*/
        display: inline-block;
        bottom: 450px;
        left: 120px;
    }

    #rectangle .code {
    /*          position: relative;*/
        display: inline-block;
        bottom: 700px;
        left: 350px;
    }

Answer 2

只需从#rectangle

中删除 text-align: center; 属性

Answer 3

发生这种情况是因为最后一个 div 覆盖了其他。因此，当您悬停其他框时，实际上悬停在最后一个框的 div。

通常，使用 google chrome 中的开发工具，您可以看到实际发生的情况。

右键单击 -> 检查

只有最后一个 href 有效

Only last href is working

html

css

href