Question

我对HTML和CSS有一个简单的问题。我认为这很容易追查，但结果却是挑战。基本上，我有两个并排的DIV，一个是固定宽度，一个是动态的。右边的那个是固定宽度的400px 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>

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

非常感谢任何帮助。

Answer 1

您不需要保证金权利：400px

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

Answer 2

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

JS：

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

CSS：

.invisible {
    visibility: hidden;
}

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

Answer 3

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

Answer 4

是否有可能将#right嵌入#left，然后float: right？如果您在页面的整个宽度上#left，则应该具有相同的效果。

HTML + CSS - 调整大小的2个DIV

4 个答案: