javascript - 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;
}