有时我们编写banner轮播时，不想用float就改变他的性状为inline-block，但这样他的操作点使用绝对定位时会脱离容器。该怎么解决？

首先我们来看一下图：因为我们的轮播为了不让图片失真是让他宽度100%，高度自适应的。父级容器也是自适应图片的高度。但是可以看到下面的定位超出一节。这个东西使用css无法解决，所以我们用两句js代码改变一下banner容器的高度让其等于图片的高度就可以了

 

.banner-list{
    white-space:nowrap;
    font-size:0;
    height:100%;
}

.banner-list .banner-item{//这里是装着图片的li
    height:auto;
    display:inline-block;
    white-space:nowrap;
    width:100%;height:auto;
    vertical-align:top;
}

.btn-list{//这里是轮播图底部的几个小按钮列表（ul）
    height:2rem;background:rgba(0,0,0,0.3);
    position:absolute;bottom:0;left:0;right:0;
    text-align:right;line-height:2rem;padding:0 1.5rem;font-size:0;
}

使用js解决：因为用的是原生js所以看着比较乱，如果用jQuery会比这个更简洁

var banner = document.getElementById("banner");//装着banner的div

var BanList = document.getElementById("banner-list");
var listHeight = BanList .children[0].children[0].children[0].clientHeight;//这是获取的是图片的高度
 BanList.style.height = listHeight+"px";//改变容器高度