时间戳

首页 > 解决方案 > 第一个链接在响应式网格中不起作用

css - 第一个链接在响应式网格中不起作用

问题描述

您好，提前致谢。我不是程序员，但我必须在工作中使用 HTML。背景故事：这是一个学习管理系统，链接到系统内的内部页面。第一个链接不起作用，即使我切换说最后一行与第一行，第一行链接也不起作用。我究竟做错了什么？

<!doctype html>
<title>How to Video Series</title>
<style>
.grid { 
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid img {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
max-width: 100%;
}
</style>

<main class="grid">

<div class="item">
<img alt="" src="/clientimg/ku/welcome/How%20to%20Videos/THUMBNAIL-HowTo-IntroToSeries.jpg"><a 
href="https://..."></a>

<img alt="" src="/clientimg/ku/welcome/How%20to%20Videos/THUMBNAIL-HowTo-AccessPFTranscript.jpg"> 
</a><a href="https://..."></a>

<img alt="" src="/clientimg/ku/welcome/How%20to%20Videos/THUMBNAIL-HowTo- 
InitialSetupAndAssignments.jpg"></a><a href="https://..."></a>

<img alt="" src="/clientimg/ku/welcome/How%20to%20Videos/THUMBNAIL-HowTo-IDP_OJT.jpg"></a><a 
href="https://..."></a>

<img alt="" src="/clientimg/ku/welcome/How%20to%20Videos/THUMBNAIL-HowTo- 
NavigateKUODAnd101(PFVersion).jpg"></a><a href="https://..."></a>

<img alt="" src="/clientimg/ku/welcome/How%20to%20Videos/THUMBNAIL-HowTo-IDP_KB.jpg"></a><a 
href='https://..."></a>

<img alt="" src="/clientimg/ku/welcome/How%20to%20Videos/THUMBNAIL-HowTo-IDP_CurriculumReport.jpg"> 
</a><a href="https://..."></a>
</div>  
</main>

标签： cssresponsive-designcss-grid

解决方案

欢迎来到编程世界！这里有几个问题，概述如下。

  1. 您的<a>标签实际上并未包含您想要点击的内容。我们必须环绕<a> 我们想要可点击的，<a href="#"><p>Like this!</p></a>并且<p>Not like this</p><a href="#"></a>
  2. 有几个区域没有关闭字符串。<img src="this/is/an/example ></img>
  3. 结束标签的数量比打开的标签多。我们只会清理那些。
  4. img在某些情况下，在'src属性的字符串中间插入新行。不要仅仅为带有src属性的人工格式化而开始新行。
  5. 一些单引号在包裹字符串时'会与双引号混合。"一定要努力确保它们是相同的。

请记住，我无法测试图像源，因为您在本地链接它们。之后，您的最终代码是：

<!doctype html>
<title>How to Video Series</title>
<style>
  .grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  }
  .grid img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  max-width: 100%;
  }
</style>

<main class="grid">
  <div class="item">
    <a href="https://..."></a>
      <img alt="" src="/clientimg/ku/welcome/How%20to%20Videos/THUMBNAIL-HowTo-IntroToSeries.jpg">
    </a>

    <a href="https://...">
      <img alt="" src="/clientimg/ku/welcome/How%20to%20Videos/THUMBNAIL-HowTo-AccessPFTranscript.jpg"> 
    </a>

    <a href="https://...">
      <img alt="" src="/clientimg/ku/welcome/How%20to%20Videos/THUMBNAIL-HowTo-">
    </a>

    <a href="https://...">
      <img alt="" src="/clientimg/ku/welcome/How%20to%20Videos/THUMBNAIL-HowTo-IDP_OJT.jpg">
    </a>
    <a href="https://...">
      <img alt="" src="/clientimg/ku/welcome/How%20to%20Videos/THUMBNAIL-HowTo-NavigateKUODAnd101(PFVersion).jpg">
    </a>

    <a href="https://...">
      <img alt="" src="/clientimg/ku/welcome/How%20to%20Videos/THUMBNAIL-HowTo-IDP_KB.jpg">
    </a>

    <a href="https://..."></a>
      <img alt="" src="/clientimg/ku/welcome/How%20to%20Videos/THUMBNAIL-HowTo-IDP_CurriculumReport.jpg"> 
    </a>
  </div>  
</main>

祝你好运！

推荐阅读