有時我們編寫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";//改變容器高度