我有一个包含div的div包含一个带有jCarousel和div的div,两个Arrows用于更改图片。
问题在于,当我调整浏览器大小或放大或缩小时,箭头会移动并在jcarousel div下面移动。
为什么会这样?以下是一个示例:http://fiddle.jshell.net/Wbt83/
答案 0 :(得分:0)
我无法模拟您遇到问题但是响应式设计的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>