Question

我尝试使用CSS在我的页面上创建一个滑块。我已经做了大部分工作，但是当我使用溢出时：隐藏在div中的一切都消失了。

HTML

＆＃13;

    @import url(http://fonts.googleapis.com/css?family=Istok+Web);
     @keyframes slidy {
     0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
    }
    body, figure { 
      margin: 0; background: #101010;
      font-family: Istok Web, sans-serif;
       font-weight: 100;
    }
     div#captioned-gallery { 
       width: 100%; overflow: hidden; 
     }
    figure.slider { 
      position: relative; width: 500%;
      font-size: 0; animation: 30s slidy infinite; 
    }
    figure.slider figure { 
      width: 20%; height: auto;
      display: inline-block;  position: inherit; 
    }
    figure.slider img { width: 100%; height: auto; }
    figure.slider figure figcaption { 
     position: absolute; bottom: 0;
     background: #43C1DF;
     color: #fff; width: 100%;
      font-size: 2rem; padding: .6rem; 
     font-family: lato;
     text-align: center;
     min-height: 50px;
    padding-top: 15px;
    }

＆＃13;

 <div id="captioned-gallery">
            <figure class="slider">
                <figure>
                     <figcaption>Individual Learners! Courses from £18.00     </figcaption>
             </figure>
          <figure>
            
            <figcaption>Employers! Course from £14.00 to £10.00</figcaption>
         </figure>
        <figure>
           
            <figcaption>Plus unlimited redeem codes!</figcaption>
        </figure>
        <figure>
           
            <figcaption>The more you train!, The more cost effective!</figcaption>
        </figure>
        <figure>
            <figcaption>Plus personalised training academies</figcaption>
        </figure>

        <figure>
            <figcaption>Open access courses of your choice</figcaption>
        </figure>

        <figure>
            <figcaption>Courses accepted by Local Authorities</figcaption>
        </figure>
        <figure>
            <figcaption>Instant access and outstanding support! </figcaption>
        </figure>

    </figure>
</div>

＆＃13;

我必须做错事但能弄清楚是什么。感谢您提前提供任何帮助。

Answer 1

您必须为元素指定高度

我刚刚添加了

drainAndComplete

html,body,body>div,div>figure{
    height:100%;
}

   
    @import url(http://fonts.googleapis.com/css?family=Istok+Web);
     @keyframes slidy {
     0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
    }
    body, figure { 
      margin: 0; background: #101010;
      font-family: Istok Web, sans-serif;
       font-weight: 100;
    }
    html,body,body>div,div>figure{
      height:100%;
    }
     div#captioned-gallery { 
       width: 100%; overflow: hidden; 
     }
    figure.slider { 
      position: relative; width: 500%;
      font-size: 0; animation: 30s slidy infinite; 
    }
    figure.slider figure { 
      width: 20%; height: 100%;
      display: inline-block;  position: inherit; 
    }
    figure.slider img { width: 100%; height: auto; }
    figure.slider figure figcaption { 
     position: absolute; bottom: 0;
     background: #43C1DF;
     color: #fff; width: 100%;
      font-size: 2rem; padding: .6rem; 
     font-family: lato;
     text-align: center;
     min-height: 50px;
    padding-top: 15px;
    }

Answer 2

See this working fiddle

我已经更正了您的html结构，figure元素不能围绕另一个figure元素。否则你的结构很好。

在CSS中，我只改变了这个：

body { 
  margin: 0; background: #101010;
  font-family: Istok Web, sans-serif;
   font-weight: 100;
   overflow-x: hidden;
}

我删除了适用于您的代码的所有figure的{{1}}属性，这很好。

溢出隐藏隐藏一切

2 个答案: