Question

我有4个简单的img和h4，它们针对第三方链接。类projectImage2与其他3重叠，页面的大部分内容都是针对点击

<a href="https://eliottenos.github.io/eliott-game/"<div class="game"<h4>Game Application</h4></div></a>

<a href="https://github.com/eliottenos/filebucket-client"><img class="projectImage2"src="http://i.imgur.com/iiGiuX7.png" 
title="FileBucket Application" /></a>

<a href="https://eliottenos.github.io/filebucket-client/"><div 
   class="fileBucket"><h4>FileBucket Application</h4></div></a>

   <a href="https://github.com/eliottenos/eliott-game"><img 
   class="projectImage1"src="http://i.imgur.com/iiGiuX7.png" title="Game 
   Application" /></a>

我能想到的唯一能让它脱光的是CSS吗？

.game {
  position: absolute;
  padding-left: 250px;
  padding-right: 250px;
  padding-top: 130px;
}

.fileBucket {
  position: absolute;
  padding-left: 250px;
  padding-right: 250px;
  padding-top: 200px;
}

.projectImage2 {
  height: auto;
  width: auto;
  top: 450px;
  left: 440px;
  max-width: 100px;
  max-height: 70px;
  position: absolute;
  display: inline;
}

.projectImage1 {
  height: auto;
  width: auto;
  top: 380px;
  left: 440px;
  max-width: 100px;
  max-height: 70px;
  position: absolute;
  display: inline;
}

Answer 1

所以我有一个正确的外观，问题不仅仅是链接，而是你的html结构如何，位置：绝对几乎所有东西，所以一切都重叠一切，我强烈建议你使用bootstrap模板作为一个开始，你可以使用bootstrap轻松设置列和行，它将是响应式的。我试图把链接放在正确的位置，但因为你有位置：绝对的一切，我将不得不改变html的布局方式，例如html中另一部分下面的一些东西弹出顶部那个内容。

你必须将你的html视为水平行，如果它们是向左或向右并不重要，如果它们出现在同一行，则将它放在一个div下。

例如，对于带引导程序的内容，您可以执行以下操作：

<div class="row">
  <div class="col-md-4">
      Contact Details, Phone Number etc...
  </div>
  <div class="col-md-8">
      <p>
      Fullstack Web Developer coming from a diverse, technical business background. Having worked and traveled the world, I have acquired a breadth of skill sets through different industries which has culminated in my goal of becoming a trained fullstack web developer.
     </p>
     <ul class="main">
        <li>Write HTML, CSS, and JavaScript for displays in contemporary browsers with responsive design practices</li>
        <li>Develop back-end web applications and APIs using a modern programming languages and MVC web development framework</li>
        <li>Collaborate with teams using an agile development workflow and widely-accepted collaboration practices using Git and GitHub for version control</li>
        <li>Improve and demonstrate web development skill-set by building a series of full-stack web applications</li>
     </ul>
  </div>
</div>

左侧占据4列，右侧占8列，总列宽总计为12，所以你也可以这样做。

<div class="row">
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
</div>

单击目标区域与目标重叠

1 个答案: