.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { zoom: 1; } .container { margin:0 auto; overflow: hidden; height:10%;} .poster-main { position: relative; margin: 90px auto; } .poster-main a, .poster-main img { display: block; } .poster-main .poster-list { width: 1000px; height: 500px; } .poster-main .poster-list .poster-item { width: 200px; height: 500px; position: absolute; left: 0; top: 0; } .poster-main .poster-btn { position: absolute; top: 0; z-index: 10; cursor: pointer; } .poster-main .poster-prev-btn { left: -175px; background: url(../images/left.png) no-repeat center center; } .poster-main .poster-next-btn { right: -175px; background: url(../images/right.png) no-repeat center center; } @media only screen and (max-width: 1160px) { .poster-main{width: 100% !important; height: 300px !important; margin: 50px auto !important; overflow: hidden !important;} .poster-main .poster-list{ width: 100% !important; height: 100% !important; } .poster-main .poster-list .poster-item{width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important;} .poster-main a, .poster-main img {height: 100%; width: 100%;} .poster-main .poster-prev-btn{ left: 0 !important;top:35%!important;} .poster-main .poster-next-btn{right: 0 !important;top:35%!important;} } @media only screen and (max-width: 768px) { .poster-main{margin:20px auto !important;} .poster-list li span{font-size:14px !important; } }