使用左属性将一个 div 移到另一个上答案

【问题标题】：Moving one div over other using left property使用左属性将一个 div 移到另一个上
【发布时间】：2014-11-16 04:59:38
【问题描述】：

我有 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/

【问题讨论】：

如果您提供代码，我们可能会帮助您，也许是 jsfiddle？
你试过从left: 0; right: auto切换到left: auto; right: 0吗？
@Flopet 我还没有编写脚本来执行此操作。而是尝试在 mozilla firefox 中使用 firebug 来解决问题。
我认为this question 中前 2 个答案的混合可能是您所追求的，但没有顶部动画

标签： html css

【解决方案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 的宽度和高度可以随时更改，而不会影响行为。

【讨论】：

非常感谢@WordPress 开发者我修改了你的小提琴并满足了我的需要jsfiddle.net/q4u37yqe/1
如果您认为答案最适合您的问题，请不要忘记将答案标记为已接受。

【解决方案2】：

您应该同时为子 div 和父 div 提供一个 css 位置（相对或绝对）。
然后你可以给孩子（内部）div "right: 0"

outer{
    position: relative;
}

inner{
    position: relative;
    right: 0;
}

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

【讨论】：