Первая ссылка не работает в адаптивной сетке - PullRequest
Новая
       21

Первая ссылка не работает в адаптивной сетке

0 голосов
/ 24 октября 2019

Здравствуйте и спасибо заранее. Я не программист, но я должен использовать 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>

1 Ответ

0 голосов
/ 24 октября 2019

Добро пожаловать в мир программирования! Здесь есть несколько проблем, описанных ниже.

  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>

Удачи!

...