swiper.js我给swiper-slide里面的div设置高度后为什么 财富值16

2016-10-19 17:47发布

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>微活动</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no" minimal-ui />     <script src="//upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>     <link rel="stylesheet" href="../css/swiper.min.css">     <script src="../js/swiper.min.js"></script>     <script src="../js/small.js"></script>     <link rel="stylesheet" href="../css/test.css">     <script src="../js/app.js"></script>  </head> <body> <div class="swiper-container">     <div class="swiper-wrapper">         <div class="swiper-slide">            <div class="content-slide1">1</div>         </div>         <div class="swiper-slide">             <div class="content-slide2">2</div>         </div>     </div>     <div class="swiper-pagination"></div>     <div class="swiper-scrollbar"></div> </div>  </body> </html>

css代码如下:

 .content-slide1{     width:640px;     height:1008px;     background: url("../images/bj-1.jpg") no-repeat 0 0;     background-size:640px 1008px; } .content-slide2{     width:640px;     height:1008px;     background: url("../images/bj-2.jpg") no-repeat 0 0;     background-size:640px 1008px; }

最后效果如图

我给content-slide1设置了height108px;它自己给父层的swiper-slide设置了行内样式height:2046px这是为什么?
swiper.js里面封装的函数是怎么设置高度的?原理是什么?

1条回答

根据最外层的container高度决定的,即.swiper-container。当然有参数可以设置是否自动高度和固定高度,2.x和3.x的设置方法不一样,可以参考官方API

一周热门 更多>