容器内的垂直、水平滚动

2018-01-18  本文已影响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;
}
上一篇下一篇

猜你喜欢

热点阅读