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

Question

嘿伙计们，所以我目前的目标是制作一个可点击的DIV网格，其中包含文本并在单击时链接到另一个网站。目前，我遇到的问题是第 2 行中的最后一个 DIV(以及整体上的最后一个 DIV(略高于该行中的其他 DIV，我不太确定为什么，也没有找到解决方法来解决它。作为旁注，我也很难将页面中的 DIV 集居中。该技术似乎不起作用。

以下是相关网页的链接：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框似乎高于其他平面/轴。我只需要一个简单的修复(如果有的话(以确保它与其他修复相同。希望这可以轻松完成！谢谢，祝你白天/晚上愉快。

Answer 1

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

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

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

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