Question

对不起有点新手，但我有这个恼人的问题，我无法弄清楚为什么这两个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下面的问题

如果你仔细观察，你可以看到那些本应该没有封面的文字。当我弄乱页面上的缩放时，它就会显露出来......

不知道为什么这两个div重叠？

0 个答案: