Div右对齐并根据右侧的其他Div改变x位置

Question

总体而言，我希望有类似的内容 jsfiddle.net/DSghU /

只是整个事情没有滑向左边。它应滑动 到右侧。因此，通过单击按钮，按钮将完全位于右侧。

修改

我能够解决第一个问题：jsfiddle.net/kwoxer/7hne1d0b /

但是现在我正在寻找一个小问题。我真的不喜欢在切换时文本正在制动。如何设置它以使文本不会制动？

编辑2

目前的解决方案已经很酷了。但是其他内容只是另一个小问题。它正在向底部移动。那么这些切换元素如何才能真正像叠加一样。这里有一个例子：jsfiddle.net/kwoxer/7hne1d0b/4/我希望其他文本（左边）保持原样。而图像则有一个SVG！

编辑3

找到它。你需要另一个内在的div：jsfiddle.net/kwoxer/7hne1d0b/5/但我不认为这是一个很酷的解决方案吗？如果有人发现更好的方法，请告诉我。

Answer 1

这是对的吗？请看下面的小提琴： http://jsfiddle.net/zxwo3ack/16/

基本上我只是向css添加了一些东西

#myDiv {
    position:relative;
    top:50px;
    color:Green;
    background-color:#eee;
    border:2px solid #333;
    text-align:justify;
    float:right;
    width:200px;
    overflow:hidden;
}
#button{
    position: absolute;
    top:80px;
    right:0px;
    float:right;
}
.other_details{
    position:relative;
    top:50px;
    float:right;
    font-weight:bold;
    width:200px;
    border:1px solid black;
    padding:5px;
    margin-left:2px;
}

Answer 2

为了实现您的目标，您需要为left位置或margin-left设置动画。在这两种情况下，尊重div应该再包含一个带溢出的容器：隐藏在它上面。

var targetWidth = $('#myDiv').css("margin-left") == "200px" ? "0px" : "200px";

if (!$("#myDiv").is(":visible")) {
    $("#myDiv").show();
}

$('#myDiv').animate({marginLeft: targetWidth}, duration, function () {
    if ($(this).css("margin-left") == "200px") {
        $(this).hide();
    } else {
        $(this).show();
    }
});

演示： http://jsfiddle.net/7hne1d0b/3/

Answer 3

解决方案非常简单。只需要更改一些CSS以及编辑HTML中的顺序和元素。

这就是我想要的：jsfiddle.net/kwoxer/7hne1d0b/2 /