Question

嘿伙计们，我正在这个画廊工作。现在我在块网格上设置缩略图并且我在第一个列表项上添加了一个叠加div，问题是我无法动态设置它我的意思是100％宽度和高度因为画廊响应所以我想要的那叠加层应该固定在拇指上。

我无法设置小提琴，所以我上传了一个实例。你可以看到叠加伸展的拇指。请提出解决方案 Link

感谢。 我需要在每个拇指上叠加。

这是我的新代码

 <style>
    .thumbsList li {
      position: relative;
    }
    .overlay
    {

      position: absolute;
      z-index: 22;
      background-color: black;
      opacity: 0.6;
      height:100%;
      with:100%;
      z-index: 22;
    }  
  </style>

</head>
<body>  



 <div class="row projectsRow">

  <ul class="large-block-grid-3 medium-block-grid-3 small-block-grid-2 thumbsList">
    <li >

      <div class="overlay"></div>
      <img class="projectsThumbs" src="img\projects\1.jpg" alt="">

    </li>
    <li >
      <div class="overlay"></div>
      <img class="projectsThumbs" src="img\projects\2.jpg" alt=""></li>
      <li >
        <div class="overlay"></div>
        <img class="projectsThumbs" src="img\projects\3.jpg" alt=""></li>




      </ul>

    </div>



    <script src="js/jquery.js"></script>
    <script src="js/jquery.nicescroll.min.js"></script>

    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>


  </body>
  </html>

Answer 1

向position: relative;元素提供<li>。同时将<div class="overlay"></div>标记放在每个<li>标记内。

.thumbsList li {
    position: relative;
}

并将以下代码放在所有<li>中，而不只是第一个。

<div class="overlay"></div>

无法在基础中为块网格设置叠加div

1 个答案: