html - 溢出隐藏不起作用 - 试图将溢出隐藏在容器中但它会剪切图片

Question

我正在学习教程，但它没有提供相同的输出。请帮我。我尝试了此处提出的解决方案，但效果不佳。

CSS:

#mainSlider{
            width: 960px;
            height:500px;
            display: block;
            position:relative;
            margin:auto;

        }
        #Islider{
            width:960px;
            height:500px;
            display:block;
            position:absolute;
             overflow:hidden;
        }
        .info{
            width:960px;
            height:80px;
            display:block;
            position:relative;
            background: rgb(120, 217, 132);
            z-index:99;
            bottom: 100px;

        }

        .info h2{
            font-family: sans-serif;
            font-size: 20px;
            font-weight: bold;
            color:#FFF;
            padding: 15px 0 0 20px;


        }
        .info p{
            font-family:sans-serif;
            font-size:15px;
            font-weight: lighter;
            color:#FFF;
            padding:0 0 0 20px;
            line-height: 1px;

        }
        #play{
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: block;
            position: absolute;
            background: rgb(0, 255, 144);
            color: #FFF;
            cursor:pointer;
            z-index: 999;
            top: 0;
            right: 44px;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);

        }
         #pause{
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: block;
            position: absolute;
            background: rgb(0, 255, 144);
            color: #FFF;
            cursor:pointer;
            z-index: 999;
            top: 0;
            right: 88px;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
        }
          #next{
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: block;
            position: absolute;
            background: rgb(0, 255, 144);
            color: #FFF;
            cursor:pointer;
            z-index: 999;
            top: 0;
            right: 0;
        }
           #previous{
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: block;
            position: absolute;
            background: rgb(0, 255, 144);
            color: #FFF;
            cursor:pointer;
            z-index: 999;
            top: 0;
            right: 133px;
        }

           #pager{
               width:100px;
               text-align:center;
               display:block;
               position:absolute;
               cursor:pointer;
               z-index:999;

           }
           #pager a{
               width: 10px;
               height: 10px;
               display:inline-block;
               position:relative;
               border: 1px solid #FFF;
               border-radius:20px;
               background: #FFF;

           }

HTML:

<div id="mainSlider">

             <div id="pager"></div>
             <div id="pause">&asymp;</div>
             <div id="play">&Delta;</div>
             <div id="next">&raquo;</div>
             <div id="previous">&laquo;</div>


            <div id="iSlider">

                <div class="items">

                <img src="images/p1.jpg" />

                    <div class="info">

                    <h2>Title </h2>
                    <p> Some paragraph <a href="www.fb.com"> Title </a> </p>

                    </div>

                </div>

                 <div class="items">

                <img src="images/p2.jpg" />

                    <div class="info">

                    <h2>Title </h2>
                    <p> Some paragraph <a href="www.fb.com"> Title </a> </p>

                    </div>

                </div>

                 <div class="items">

                <img src="images/p3.jpg" />

                    <div class="info">

                    <h2>Title </h2>
                    <p> Some paragraph <a href="www.fb.com"> Title </a> </p>

                    </div>

                </div>

            </div>

      </div>

这是 JsFiddle:http://jsfiddle.net/vaughnellis/xomcshz4/我已经在这里尝试了解决方案，即将溢出隐藏在 Islider 容器中，但它不起作用。我也尝试将它放在#mainSlider 中，但它会将图片切成两半。请帮忙。谢谢!

Answer 1

1. 为了隐藏滚动条，应用“overflow: hidden;” body 不至 <div>容器。

2. 截图请删掉“bottom: 100px;”来自“.info”。

body {overflow: hidden;}        

#mainSlider{
        width: 960px;
        height:500px;
        display: block;
        position:relative;
        margin:auto;

    }
    #Islider{
        width:960px;
        height:500px;
        display:block;
        position:absolute;
         overflow:hidden;
    }
    .info{
        width:960px;
        height:80px;
        display:block;
        position:relative;
        background: rgb(120, 217, 132);
        z-index:99;


    }

    .info h2{
        font-family: sans-serif;
        font-size: 20px;
        font-weight: bold;
        color:#FFF;
        padding: 15px 0 0 20px;


    }
    .info p{
        font-family:sans-serif;
        font-size:15px;
        font-weight: lighter;
        color:#FFF;
        padding:0 0 0 20px;
        line-height: 1px;

    }
    #play{
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: block;
        position: absolute;
        background: rgb(0, 255, 144);
        color: #FFF;
        cursor:pointer;
        z-index: 999;
        top: 0;
        right: 44px;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);

    }
     #pause{
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: block;
        position: absolute;
        background: rgb(0, 255, 144);
        color: #FFF;
        cursor:pointer;
        z-index: 999;
        top: 0;
        right: 88px;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
      #next{
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: block;
        position: absolute;
        background: rgb(0, 255, 144);
        color: #FFF;
        cursor:pointer;
        z-index: 999;
        top: 0;
        right: 0;
    }
       #previous{
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: block;
        position: absolute;
        background: rgb(0, 255, 144);
        color: #FFF;
        cursor:pointer;
        z-index: 999;
        top: 0;
        right: 133px;
    }

       #pager{
           width:100px;
           text-align:center;
           display:block;
           position:absolute;
           cursor:pointer;
           z-index:999;

       }
       #pager a{
           width: 10px;
           height: 10px;
           display:inline-block;
           position:relative;
           border: 1px solid #FFF;
           border-radius:20px;
           background: #FFF;

       }

这是我的演示 fiddle