Не уверен, почему эти два div совпадают? - PullRequest
Новая
       6

Не уверен, почему эти два div совпадают?

0 голосов
/ 02 июня 2018

Извините, новичок, но у меня возникла эта досадная проблема, из-за которой я не могу понять, почему эти два div-ов перекрываются ... У меня есть контент за вторым изображением, которое сейчас освещается, но я хочу этот контентчтобы показать и для второго изображения, чтобы нормально отображаться под ним ..

вот что у меня есть html: 

<main>
    <div id="top_head">
      <h2>
        Gallery
      </h2>
    </div>

    <br>

    <div id="canvas">

      <div class="gal_block">
        <img src="../img/b_sign.jpg" alt="#">
        <br>
        <h2 class="gal_head">Chill Morning</h2>
        <br>
        <p class="gal_meta">May 12, 2018 / by nock / Outdoors<p>
        <br>
        <p class="gal_info"></p>
      </div>



      <div class="gal_block">
        <img src="../img/b_sign.jpg" alt="#">
        <br>
        <h2 class="gal_head">Chill Morning</h2>
        <br>
        <p class="gal_meta">May 12, 2018 / by nock / Outdoors<p>
        <br>
        <p class="gal_info"></p>
      </div>

    </div>
  </main>

И мой CSS: 

    * {
  margin:0;
  padding: 0;
}

.clearfix {
  clear: both;
}

#container {
  margin: 0 auto;
  width: 100%;
}

a {
 text-decoration: none;
}

header {
  width: 100%;
}

#left_header {
  float: left;
  margin: 5%;
  padding:;
  width: 20%
}
  #left_header h1 {
    font-family: 'Pacifico',cursive;
  }

header nav {
  float: right;
  margin: 5%;
  width: 35%;
}

  header nav ul li {
    float: left;
    margin-left: 7%;
    padding:0;
    list-style: none;
    font-size: 20px;
    font-family: 'Raleway',cursive;
  }

  header nav ul li a {
    color: black;
    transition: color 1s;
  }

  header nav ul li a:hover {
    color: gray;
  }

main {

}

  #top_head h2 {
    font-family: 'Source Serif Pro';
    font-size: 30px;
    text-align: center;
  }
  /*affects all pages ^^^*/

  /*home*/
  #img_wall {
    width: 82%;
    height: 100%;
    padding: 7%;
  }

    #l_big {
      padding: 1%;
      float: left;
      width: 58%;
      height: 67%;
    }

    #l_big img{
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }

    #r_top {
      padding: 1%;
      float: left;
      width: 38%;
      height: 32%;
    }

    #r_top img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }

    #r_bottom {
      padding: 1%;
      float: left;
      width: 38%;
      height: 32%;
    }

    #r_bottom img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }
  /*home end*/

  /*about*/

  /*about end*/

  /*gallery*/
  #canvas {

  }
    .gal_block {
      display: block;
      margin: 0 auto;
      width: 80%;
      height: 70%;
      margin-top: 5%;
    }

    .gal_block img {
      width: 100%;
      height: 100%;
      display: block;
      margin: 0 auto;
      border-radius: 5px;
    }

    .gal_head {
      font-family: 'Source Serif Pro';
      font-size: 25px;
      text-align: center;
      margin-top: 2%;
    }

    .gal_meta {
      font-family: 'Raleway',cursive;
      font-size: 12px;
      color: gray;
      text-align: center;
    }

    .gal_info {
      font-size: 14px;
      font-family: Arial;
      width: 40%;
      margin: 0 auto;
      line-height: 1.5;
      margin-bottom: 8%;
    }

У меня также есть контейнер для всего, что имеет ширину 100%, если это имеет значение .. (думаю, это не так), но img проблемы ниже

example

example

Если вы посмотрите внимательно, вы можете увидеть текст, который, как предполагается, не покрывает ... раскрывает себя, когда я возиться с увеличением на странице ...

...