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

Question

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

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

爲什麼會發生這種情況？這裏有一個例子：http://fiddle.jshell.net/Wbt83/

Answer 1

我不能模擬你ARA遇到的麻煩是什麼，但這裏是響應式設計的正確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>