1

我有两个并排的包装器 div。我想在右列中排列 div 以匹配左列中选择 div 的位置。

在小提琴中，右列中的每个 div 应与左列中每隔一个 div 的顶部对齐。左边每两个 div 应该有一个 div [x]。

这一切都是动态创建的，这就是为什么我按照它的方式制作小提琴http://jsfiddle.net/sKZXJ/

HTML：

<!-- Extra height added because that seems part of the problem -->
<div style="height:60px;"></div>

<div id="scroller">
    <div id="wrapper1"></div>
    <div id="wrapper2"></div>
</div>

CSS：

#scroller {
    height:300px;
    width:60px;
    overflow-x:scroll;
}
#wrapper1 {float:left; width:15px;}
#wrapper2 {float:left; width:15px;}
.littleOne {
    margin-top:1px;
    position:relative;
    height:40px;
    background-color:#006600;
}
.littleTwo {
    margin-top:1px;
    position:relative;
    background-color:#00CCCC;
}

有趣的部分：

$(document).ready(function() {

    // Fill wrapper1 with divs
    for(var i=0;i<50;i++) {
        $('#wrapper1').append('<div id="a'+i+'" class="littleOne"></div>');
    }

    // Add selected divs to wrapper2 in matching positions
    var pos = 0;
    for(var i=0;i<50;i+=2) {
        $('#wrapper2').append('<div id="b'+i+'" class="littleTwo">X</div>');
        pos = $('#a'+i).position().top - $('#scroller').position().top;
        $('#b'+i).css('top', pos+'px');
    }

});
4

4 回答 4

2

给你：http: //jsfiddle.net/f5ArU/3/

$(document).ready(function() {

    // Fill wrapper1 with divs
    for(var i=0;i<50;i++) {
        $('#wrapper1').append('<div id="a'+i+'" class="littleOne"></div>');
    }

    // Add selected divs to wrapper2 in matching positions
    var pos = 0;
    var offset = 0;
    for(var i=0;i<50;i+=2) {
        var b = $('<div id="b'+i+'" class="littleTwo">X</div>');
        $('#wrapper2').append(b);
        pos = $('#a'+i).position().top - offset;
        offset += b.height() + 1;
        b.css('top', pos+'px');
    }

});
于 2012-04-27T05:28:28.607 回答
0

那是你要的吗？

http://jsfiddle.net/sKZXJ/1/

只是scrollTop在一个地方使用而不是top（如果那是你的意思）。

于 2012-04-27T05:12:35.193 回答
0

“我想将右列中的 div 对齐，以匹配左列中选择的 div 的位置。”

您可以使用此代码示例进行管理 - 我已更新您的链接 http://jsfiddle.net/sKZXJ/2/ - 更改背景颜色

$("#wrapper1 div").click(function () {
$('#wrapper2 div:eq('+($(this).index())+')').css('background-color','#000');
于 2012-04-27T05:31:10.087 回答
0

这是一个利用 html 结构和 css 的解决方案：http: //jsfiddle.net/sKZXJ/6/

这是一种尝试将逻辑与布局分开的替代方案。微小的“x”只出现在每隔一个绿色块上，这让我假设每 3 个块都应该在逻辑上分组。

html:

<div id="scroller"></div>

js：

$(document).ready(function() {
    // Fill wrapper1 with divs
    for(var i=0;i<50;i+=2) {
        var one = $('<div></div>').attr('id', 'a'+i).addClass('littleOne'),
            two = $('<div></div>').attr('id', 'b'+i+1).addClass('littleTwo'),
            three = $('<div></div>').attr('id', 'a'+i+1).addClass('littleOne'),
            container = $('<div></div>').addClass('container').append(one).append(two).append(three);

        $('#scroller').append(container);
    }    
});​

CSS：

#scroller {
    height:300px;
    width:60px;
    overflow-x:scroll;
}
.container {
    width: 40px;
}
div {
    margin: 1px;
    width: 15px;
}
.littleOne {
    float: left;
    clear: left;
    height:40px;
    background-color:#006600;
}
.littleTwo {
    float: left;
    height:20px;
    background-color:#00CCCC;
}    ​
于 2012-04-27T05:50:10.693 回答