在网格中并排放置可点击的 DIV。最后 DIV 给出问题

Question

大家好，我目前的 objective 是制作一个可点击的 DIV 网格，其中包含文本，并在点击时 link 转到另一个网站。目前，我遇到的问题是第二行的最后一个 DIV（和最后一个 DIV，总体而言）略高于该行中的其他人，我不太确定为什么，我也没有想出解决它的方法。作为旁注，我在将 DIV 集置于页面中心时也遇到了问题。该技术似乎不起作用。

link 到有问题的网页：http://thefloodplains.com/TheFloodSharkMain.html

这是我正在使用的CSS：

div {
    color: #00A5D1;
    padding-top: 14px;
    }
h12 {
    font-size:36px;
    font-style: bold;
    text-align:center;
    font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
    text-decoration-color: #FF8B6F;
    }
a {
    Text-decoration: none;
    border-bottom: dashed 1px;
    text-decoration-color: #FF8B6F;
}
a:hover {
  Color: #FF8B6F;
  border-bottom: solid 1px;
}
.Row
{
    display: table;
    width: 100%; /*Optional*/
    max-width: 960px;
    table-layout: fixed; /* Optional*/
    border-spacing: 10px; /* Optional */
    margin-left: auto;
    margin-right: auto;
}
.blockx {
  display: inline-block;
  width: 290px;
  height: 290px;
  background-color: #00A5D1;
  background-image: url('DownloadMusic2.png');
  background-position: center center; /* center the image in the div */
  background-size: cover; /* cover the entire div */
  background-repeat: no-repeat;
  background-size: 100%;
  border: 1px solid #FF8B6F;
  /* align-items: center;
  justify-content: center; */
  text-align: center;
}
.blocky {
  display: inline-block;
  width: 290px;
  height: 290px;
  background-color: #00A5D1;
  background-image: url('EPKIcon2.png');
  background-position: center center; /* center the image in the div */
  background-size: cover; /* cover the entire div */
  background-repeat: no-repeat;
  background-size: 100%;
  border: 1px solid #FF8B6F;
  /* align-items: center;
  justify-content: center; */
  text-align: center;
}
.blockz {
  display: inline-block;
  width: 290px;
  height: 290px;
  background-color: #00A5D1;
  background-image: url('StreamAudio.png');
  background-position: center center; /* center the image in the div */
  background-size: cover; /* cover the entire div */
  background-repeat: no-repeat;
  background-size: 100%;
  border: 1px solid #FF8B6F;
  /* align-items: center;
  justify-content: center; */
  text-align: center;
}
.blocka {
  display: inline-block;
  width: 290px;
  height: 290px;
  background-color: #00A5D1;
  background-image: url('VideoStream.png');
  background-position: center center; /* center the image in the div */
  background-size: cover; /* cover the entire div */
  background-repeat: no-repeat;
  background-size: 100%;
  border: 1px solid #FF8B6F;
  /* align-items: center;
  justify-content: center; */
  text-align: center;
}
.blockb {
  display: inline-block;
  width: 290px;
  height: 290px;
  background-color: #00A5D1;
  background-image: url('ContactIcon.png');
  background-position: center center; /* center the image in the div */
  background-size: cover; /* cover the entire div */
  background-repeat: no-repeat;
  background-size: 100%;
  border: 1px solid #FF8B6F;
  /* align-items: center;
  justify-content: center; */
  text-align: center;
}
.blockc {
  display: inline-block;
  width: 290px;
  height: 290px;
  background-color: #00A5D1;
  background-image: url('Handshake2.png');
  background-position: center center; /* center the image in the div */
  background-size: cover; /* cover the entire div */
  background-repeat: no-repeat;
  background-size: 100%;
  border: 1px solid #FF8B6F;
  /* align-items: center;
  justify-content: center; */
  text-align: center;
}

以下是我在 DIV 中一直使用的 HTML：

<center><div class="container">

<div class="row">

<a href="TheFloodSharkDownloads.html" title="Downloads"><div class="blockx"><a href="TheFloodSharkDownloads.html"><h12>Downloads</h12></a></div></a>    

<a href="EPK.html" title="Eletronic Press Kit (EPK)"><div class="blocky"><a href="EPK.html"><h12>EPK</h12></a></div></a>

<a href="http://hyperurl.co/sentimentalshark" title="Stream Audio"><div class="blockz"><a href=""><h12>Stream Audio</h12></a></div></a>

</div>

<div class="row">

<a href="https://www.youtube.com/channel/UCrcvj6Q-V4S-xad_Y_gPTFw/videos" title="Stream Video"><div class="blocka"><a href="https://www.youtube.com/channel/UCrcvj6Q-V4S-xad_Y_gPTFw/videos"><h12>Stream Video</h12></a></div></a>    

<a href="Contact-Social.html" title="Contact"><div class="blockb"><a href="Contact-Social.html"><h12>Contact</h12></a></div></a>

<a href="Contribute-Support.html" title="Contribute / Support"><div class="blockc"><a href="Contribute-Support.html"><h12>Contribute / Support</h12></a></div></a>

</div>

</div></center>

正如我所说，最后一个 DIV 框似乎高于其他 plane/axis 框。我只需要一个简单的修复（如果有的话）来确保它与其他修复一致。希望这可以轻松完成！谢谢，祝你度过愉快的一天/一晚。

Answer 1

我已修复您的代码，删除了不必要的 css 并修复了一些 html 标记。我使用 flexbox 来对齐这 6 个 div。

flex-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 960px;
  width: 100%;
}

这是工作示例。尽量不要重复代码。

https://codepen.io/anon/pen/BxwYGV

在网格中并排放置可点击的 DIV。最后 DIV 给出问题

Placing clickable DIVs side by side in a grid. Last DIV giving problems

html

css

center

hover