美文网首页
容器内的垂直、水平滚动

容器内的垂直、水平滚动

作者: 愿你如夏日清凉的风 | 来源:发表于2018-01-18 19:25 被阅读31次

    HTML代码:

    <div id="container" class=" cf">
        <div id="inner_container">
            <img src="img/bmw_m1_hood.jpg" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood" style="display: block;">
            <img src="img/bmw_m1_side.jpg" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side" style="display: block;">
            <img src="img/viper_1.jpg" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1" style="display: block;">
            <img src="img/viper_corner.jpg" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner" style="display: block;">
            <img src="img/bmw_m3_gt.jpg" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT" style="display: block;">
            <img src="img/corvette_pitstop.jpg" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop" style="display: block;">
        </div>
    </div>
    

    css代码:

    #container {
        overflow: hidden;
        overflow-x: auto;
        width: 800px;
    
    //  容器内的垂直滚动
    overflow: hidden;
        overflow-y: auto;
        height: 600px;
    }
    
    #inner_container {
        width: 4750px;
    }
    
    #container img {
        float: left;
        display: block;
        padding: 6px;
        border: 1px solid #999;
        vertical-align: middle;
    }
    .cf:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: '';
        clear: both;
        height: 0;
    }
    

    相关文章

      网友评论

          本文标题:容器内的垂直、水平滚动

          本文链接:https://www.haomeiwen.com/subject/idzwoxtx.html