调整大小与Zoom和Floating Div

Question

我有一个包装div，该包包含一个带有jcarousel和div附近的div，两个用于更改图片的箭头。

问题是，当我调整浏览器或放大大小时，箭头移动并在jcarouseldiv。

为什么会这样？这是一个示例：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>