Размещение интерактивных DIVs рядом в сетке. Последний DIV дает проблемы - PullRequest
Новая
       29

Размещение интерактивных DIVs рядом в сетке. Последний DIV дает проблемы

0 голосов
/ 06 мая 2018

Привет, ребята, поэтому моя текущая цель - создать сетку интерактивных DIV, в которых есть текст и ссылки на другой веб-сайт при нажатии. В настоящее время проблема, с которой я сталкиваюсь, заключается в том, что последний DIV во 2-м ряду (и последний 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;
}

Ниже приведен HTML-код, который я использовал для DIV: 

<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, кажется, поднимается над плоскостью / осью других. Мне просто нужно простое исправление (если оно есть), чтобы убедиться, что оно совпадает с остальными. Надеюсь, это можно сделать с легкостью! Спасибо и хорошего дня / ночи.

1 Ответ

0 голосов
/ 06 мая 2018

Я исправил ваш код, удалил ненужные CSS и немного исправил HTML-разметку. Я использовал flexbox, чтобы выровнять эти 6 делений. 

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

Вот рабочий пример. Старайтесь не повторять код.

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

...