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

这是正确的吗？请看下面的fiddle： 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 都应该用一个带有 overflow: hidden 的容器包裹。

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/

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

Div aligning right and changing x location depending on other Divs on the right side

html

javascript

css

jquery

alignment

编辑

编辑 2

编辑 3