Question

嘿伙计们，所以我目前的目标是制作一个可点击的DIV网格，其中包含文本并在点击时链接到另一个网站。目前，我遇到的问题是第二行中的最后一个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标记。我使用flexbox来对齐那6个div。

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

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

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

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

1 个答案: