使用縮放和浮動div調整大小

Question

我有一個環繞div，其中包含一個帶有jCarousel的div，並且在div附近，有兩個箭頭用於更改圖片。

問題是當我調整瀏覽器大小或放大或縮小時，箭頭會移動並在jcarousel div上方和下方移動。

為什么會這樣發生？ 這是一個示例： http : //fiddle.jshell.net/Wbt83/

Answer 1

我無法模擬您遇到的麻煩，但這是響應式設計的正確flow ：

您項目的pseudo CSS：

.wrapper{
    position: relative;
    width: 100%;   // Your custom width here
    height: 300px; // Custom height
}

.wrapper .jcarousell{
    [...] // jCarousell specif css
}

.wrapper .arrow{
    position: absolute;
    top: 40%;     // Custom top spacing for arrows
    height: 20px; // Arrow height
    width: 20px;  // Arrow width
}

.wrapper .arrow-left{
    left: 0;
}

.wrapper .arrow-right{
    right: 0;
}

您項目的偽HTML ：

<div class="wrapper">
    <ul class="jcarousell">
        <li>[...]</li>
        <li>[...]</li>
        <li>[...]</li>
    </ul>

    <img class="arrow arrow-left" src="leftArrow.png"/>
    <img class="arrow arrow-right" src="rightArrow.png"/>
</div>