使用缩放和浮动div调整大小

时间:2014-02-05 14:33:44

标签: jquery css html

我有一个包含div的div包含一个带有jCarousel和div的div,两个Arrows用于更改图片。

问题在于,当我调整浏览器大小或放大或缩小时,箭头会移动并在jcarousel div下面移动。

为什么会这样?以下是一个示例:http://fiddle.jshell.net/Wbt83/

1 个答案:

答案 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>