html - 试图做卫报的练习。我名为 "here"的链接不起作用。我尝试了各种调试，但无法解决

Question

抱歉，我不确定如何向所有人展示它。我被要求提供更多细节，但不确定需要什么细节。 div/类“此处”中的链接将不起作用。我正在模仿《卫报》的报纸布局进行练习。抱歉，如果对任何有经验的人来说这很乏味。

我试过调试但没有成功，并更改了链接等

body {
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  display: grid;
  height: 100vh;
  font-family: arial;
  margin: 0;
  border: 0;
}

.header {
  background: linear-gradient(midnightblue, blue);
  color: white;
  grid-column-start: 1;
  grid-column-end: 11;
  grid-row-start: 1;
  grid-row-end: 3;
  font-family: arial;
  font-size: 4em;
  z-index: 1;
  line-height: 2em;
  padding: 10px;
  text-shadow: 2px 3px midnightblue;
}

a:link {
  text-decoration: none;
  color: white;
}

a:visited {
  color: white;
}

a:hover {
  color: yellow;
}

.latest {
  background-color: rgb(0, 0, 100);
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 2;
  text-align: center;
  line-height: 3.5em;
  color: white;
  text-decoration: none;
}

.latest:hover {
  background-color: rgb(0, 0, 255);
}

.Aberdeen {
  background-color: rgb(0, 0, 100);
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 3;
  text-align: center;
  line-height: 3.5em;
  color: white;
}

.Aberdeen:hover {
  background-color: rgb(0, 0, 255);
}

.Celtic {
  background-color: rgb(0, 0, 100);
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 4;
  text-align: center;
  line-height: 3.5em;
  color: white;
}

.Celtic:hover {
  background-color: rgb(0, 0, 255);
}

.Dundee {
  background-color: rgb(0, 0, 100);
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 4;
  grid-column-end: 5;
  text-align: center;
  line-height: 3.5em;
  color: white;
}

.Dundee:hover {
  background-color: rgb(0, 0, 255);
}

.Hibs {
  background-color: rgb(0, 0, 100);
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 5;
  grid-column-end: 6;
  text-align: center;
  line-height: 3.5em;
  color: white;
}

.Hibs:hover {
  background-color: rgb(0, 0, 255);
}

.Hearts {
  background-color: rgb(0, 0, 100);
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 6;
  grid-column-end: 7;
  text-align: center;
  line-height: 3.5em;
  color: white;
}

.Hearts:hover {
  background-color: rgb(0, 0, 255);
}

.Rangers {
  background-color: rgb(0, 0, 100);
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 7;
  grid-column-end: 8;
  text-align: center;
  line-height: 3.5em;
  color: white;
}

.Rangers:hover {
  background-color: rgb(0, 0, 255);
}

.sj {
  background-color: rgb(0, 0, 100);
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 8;
  grid-column-end: 9;
  text-align: center;
  line-height: 3.5em;
  color: white;
}

.sj:hover {
  background-color: rgb(0, 0, 255);
}

.Motherwell {
  background-color: rgb(0, 0, 100);
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 9;
  grid-column-end: 10;
  text-align: center;
  line-height: 3.5em;
  color: white;
}

.Motherwell:hover {
  background-color: rgb(0, 0, 255);
}

.RossCounty {
  background-color: rgb(0, 0, 100);
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 10;
  grid-column-end: 11;
  text-align: center;
  line-height: 3.5em;
  color: white;
}

.RossCounty:hover {
  background-color: rgb(0, 0, 255);
}

.mainstory {
  background-color: rgb(222, 222, 222);
  grid-column-start: 1;
  grid-column-end: 6;
  grid-row-start: 4;
  grid-row-end: 8;
  overflow: auto;
  padding: 1em;
  border: 3px solid white;
}

img {
  grid-column-start: 6;
  grid-column-end: 10;
  grid-row-start: 4;
  grid-row-end: 8;
  width: 100%;
  height: 90%;
  padding: 1em;
  float: right;
  padding: 10px 10px 10px 10px;
  border-left: 3px solid white;
}

span {
  grid-row-start: 4;
  grid-row-end: 8;
  grid-column-start: 1;
  grid-column-end: 3;
}

.here {
  grid-row-start: 4;
  grid-row-end: 8;
  grid-column-start: 1;
  grid-column-end: 11;
  z-index: 1;
}

.rightimg {
  background-color: rgb(222, 222, 222);
  grid-column-start: 6;
  grid-column-end: 11;
  grid-row-start: 4;
  grid-row-end: 8;
  overflow: auto;
  padding: 1em;
}

.hearts {
  background-color: rgb(222, 222, 222);
  grid-row-start: 8;
  grid-row-end: 11;
  grid-column-start: 1;
  grid-column-end: 4;
  padding: 1em;
}

.bb {
  grid-row-start: 8;
  grid-row-end: 11;
  grid-column-start: 4;
  grid-column-end: 6;
}

.sevco {
  background-color: rgb(222, 222, 222);
  grid-row-start: 8;
  grid-row-end: 11;
  grid-column-start: 6;
  grid-column-end: 9;
  border-top: 1px solid white;
  padding: 15px;
}

.right {
  background-color: (222, 222, 222);
}

.footer {
  background-color: (222, 222, 222);
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Daily Truth</title>
<div class="header">
  The Daily Truth
</div>

<div class="latest">
  <a href="http://www.scotsman.com/" target="_blank">Latest</a></div>
<div class="Aberdeen">Aberdeen</div>
<div class="Celtic">Celtic</div>
<div class="Dundee">Dundee</div>
<div class="Hibs">Hibs</div>
<div class="Hearts">Hearts</div>
<div class="Rangers">Rangers</div>
<div class="sj">St J</div>
<div class="Motherwell">Motherwell</div>
<div class="RossCounty">Ross County</div>

<div class="mainstory">
  <h1>Old Firm losing the plot</h1>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. 
					Praesent Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti 
				</span>

</div>
<div class="rightimg">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHcLnfh72ChMIKiJZkT_D9Oh5islspJpRB69ypRP4ktEFCiY6P">
</div>

<div class="here">
  <a href="http://www.scotsman.com/"></a>
</div>

<div class="hearts">
  <h1>Heart of Gold</h1>
  <h4>Levein gives away money</h4>
  Hearts Director of football Craig levein today made the dreams come true for 100 Hearts fans when he gave away £1000 to each supporter, totalling a million pound donation.
</div>

<div class="bb">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqSicfQjgwI4istGd3dRTSVAAO-SIUk49YfMtgfCrwtnCZqwPJCg">
</div>

<div class="sevco">
  <h1>Rangers go bust</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
  Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosq.

</div>

Answer 1

你有一个高度为 0 的空 div，只需在那里写一些东西或放一些东西，在调试器中你会看到高度为 0，那是你的问题!

 <div class="here">
  <a href="http://www.scotsman.com/">MY LINK</a>
 </div>