1

我有一个关于 HTML 和 CSS 的快速问题。我认为这很容易追踪，但事实证明这是一个相当大的挑战。本质上，我有 2 个并排的 DIV，一个是固定宽度，一个是动态的。右边是一个固定宽度的 400 像素 DIV，包含一些基本信息。左边的那个应该只是填满页面的其余部分。但是有一个问题，我希望能够随时动态隐藏右侧的 DIV（使用 jQuery）并让左侧的 DIV 填充其空间。我知道有几种方法可以做到这一点，而且我已经知道一些。但我想在 jQuery 中做尽可能少的 CSS 操作。这是我的一些示例代码。

<body>
    <div id="right"></div>
    <div id="left"></div>
</body>

<style type="text/css">
    #left {
        height: 100%;
        margin-right: 400px;
    }
    #right {
        float: right;
        width: 400px;
        height: 100%;
    }
</style>

这样做的问题是右边距永久设置为 400 像素。因此，如果要重新调整右侧的大小（宽度为 0），则 400 像素的边距将保留。本质上，我需要左侧的边距，即右侧 div 的大小。

任何帮助深表感谢。

4

4 回答 4

3

你不需要 margin-right: 400px

查看现场演示：http: //jsfiddle.net/uxCpy/1/

于 2012-08-07T15:42:09.257 回答
0

在和#right之间切换。这将隐藏元素而不将其从布局中删除。visibility: hiddenvisibility: visible

JS：

$('#left').on('click',function() {
    $('#right').toggleClass('invisible');
});​

CSS：

.invisible {
    visibility: hidden;
}​

http://jsfiddle.net/mblase75/nkuv4/

于 2012-08-07T15:41:38.633 回答
0

由于您想让另一个 div 占据整个宽度，因此您必须将显示设置为无。使用 jQuery更改为display:none它会起作用，然后当您需要它显示时，更改为display:block

于 2012-08-07T15:42:21.113 回答
0

是否有可能嵌套#right在里面#left，然后float: right呢？如果你使#left页面的整个宽度，这应该有相同的效果。

于 2012-08-07T15:43:44.713 回答