Javascript 如何获得占据网页右半部分的IFRAME？

我意识到有很多问题要解释如何让两个div并排出现，但我已经尝试了他们推荐的大部分内容，但似乎没有任何效果

在页面上，我希望id为“工作表”的DIV（及其所有内容）占据页面的左半部分，id为“helpframe”的IFRAME占据页面的右半部分

目前我正在尝试：

DIV#worksheet {
    float:left;
    width:50%;
}

IFRAME#helpframe {
    float:left;
    width:50%;
}

但结果是#helpframe位于#工作表DIV下面

我还希望能够使用JQuery隐藏帮助框架，当我这样做时，工作表DIV将展开以占据整个页面

---

如何实现这一点？

只需将

iframe

绝对定位到右上方即可：

#helpframe {
    position : absolute;
    top      : 0;
    right    : 0;
    height   : 100%;
    width    : 50%;
}

使用jQuery可以隐藏

iframe

，如下所示：

$(function () {
    $('#some-button').click(function () {
        $('#helpframe').hide();
        $('#worksheet').width('100%');
    });
});

---

还有一些预先制作的动画可以用来显示/隐藏元素：

fadeIn

/

fadeOut

/

toggleFade

/

slideIn

/

slideOut

/

toggleSlide

@sanity Jasper的代码更好，但是在您自己的代码中，将

helpframe

的

float:left

替换为

float:right

。对于

helpframe

，float不是必需的，但其宽度是这样的，因此元素不会重叠（这是您的决定）。Float仅适用于相对定位的元素，当您将位置设置为绝对位置时，元素将从网页的常规流中移除，这有利于隐藏/显示元素并设置它们的动画，因为DOM中元素周围的元素不必重新绘制，除非它们直接位于元素上方/下方。我理解，因此，当我隐藏“帮助框架”时，是否需要将“工作表”的宽度更改为100%？iframe将覆盖大约4倍的基础div。是的，我添加了如何使用jQuery更改宽度。我得走了，我希望这有帮助。