Question

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

不幸的是，只有4张图片中的最后一张实际上会将您带到页面的其他部分。其他3个甚至都无法点击。如果我删除了最后一张图片及其中包含的div类，那么＆＃34; new＆＃34;最后的图片现在可以正常工作，即使之前没有工作过。

我很确定这是一个CSS问题，因为当我注释掉矩形div的CSS代码时，所有图像都是工作链接（虽然它们混杂起来，因为他们的父类的CSS代码被评论了出）。

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

有什么建议吗？谢谢！

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中的开发工具，您可以看到实际发生的情况。

右键单击 - ＆gt;检查

只有最后一个href工作正常

3 个答案: