使用left属性将一个div移到另一个div上

Question

我有2个这样的div。红色和黑色  我希望将内部div移动到外部，使得在移动结束时，内部div的最右侧应该到达外部div的最右边。 为此，我向内部div添加了一个“左”样式属性，并开始将其从0减少。 但问题是我没有得到两个div的左边和宽度之间的任何关系，知道什么时候停止移动。内部div的宽度在时间上变化而不是恒定值。在什么'px'我应该阻止它。

这是我的标记

<div id="divMenuContainer" style="height:18px;min-width:210px;overflow:hidden;">
            <div id="divMenuContainerInner" style="position:relative;overflow:hidden;">
                <ul id="ulMenuItems">                
                    <li ><a href="#" id="lnkInfo"  onclick="ChangeTab(this)">Info</a></li>
                    <li ><a href="#" id="lnkUsers" onclick="ChangePopupTab(this)">Users</a></li>
                </ul>  
            </div>          
        </div> 

divMenuContainer是外部div，divMenuContainerInner是我需要移动的内部div。而且<li/>可以是任何数字所以在脚本中我计算所有的全部宽度并将其指定为内部的宽度DIV。意味着内部div的宽度不同。

var len =0;
$("#ulMenuItems").children("li").each(function (index, element) {
     len = len + parseInt($(element).css("width"), 10);
});
console.log(len);
$("#divMenuContainerInner").css({ "width": len });

请通过这个jsfiddle http://jsfiddle.net/80x5ujyw/1/

---

我在这里提供的答案的帮助下找到了答案。我已经做了一个jsfiddle

http://jsfiddle.net/q4u37yqe/1/

修改了上面的小提琴，现在提供两个按钮来手动移动内部div http://jsfiddle.net/sqofk4pe/1/

Answer 1

根据我的理解，您可以使用css right:0属性来实现此目的。

这是一个小提琴演示用JS动画演示将内部div移动到外部div的最右边：http://jsfiddle.net/80x5ujyw/

在此处粘贴代码以供参考。

JS：

$(function(){
    var inner = $('.inner');
    var outer = $('.outer');

    var rightSpacing = parseInt(inner.css('right'))

    interval = setInterval(function(){
        if(rightSpacing < 0){
            clearInterval(interval);
            return;
        }

        inner.css('right', rightSpacing+'px');
        rightSpacing = rightSpacing - 10;
    }, 100);
});

HTML：

<div class="outer">
    <div class="inner"></div>
</div>

CSS：

.outer, .inner{
    height:100px;
}
.outer{
    position: relative;
    width:200px;
    border: 1px solid blue;
    background:blue;
}
.inner{
    position: absolute;
    right:50%;
    top:0;
    width:100px;
    background:red;
}

使用这种方法，内部和外部div的宽度和高度可以随时改变而不影响行为。

Answer 2

你应该给孩子以及父母div一个css位置（相对或绝对） 然后你可以给孩子（内部）div＆＃34;右：0＆＃34;

outer{
    position: relative;
}

inner{
    position: relative;
    right: 0;
}

我认为你的意思是这样的，如果不是，你应该在你的问题中添加一些代码。