Html 分区'；如果另一个div被隐藏或未被隐藏，则s的宽度调整？

在我的身体里，我想要两个内容并排的div，每个div都有50%的屏幕宽度。但我希望能够隐藏/显示第一个div，然后第二个div的宽度响应此更改，将其宽度更改为100%或50%。根据第一个div是否隐藏，填充主体或主体的其余部分

---

有什么办法吗？（我知道如何使用jquery显示/隐藏，我想到了HTML）

只对第一个元素使用浮动，让第二个元素适合剩余的空间

然后，如果元素以

宽度：50%

可见，则第二个元素将填充另一半。但如果第一个被隐藏，第二个将填满整个屏幕

HTML:

JS:

---

另一种可能性：使用

显示：表格单元格

。与浮动相比，这具有两列具有相同高度的优势，并且设置包装器的高度也将为两列设置包装器的高度

HTML:

JS:

---

谢谢它几乎起作用了。不过我觉得第二组有点问题。我在第二个分区有一张地图，如果我开始用它填充整个区域，然后显示第一个分区（宽度为50%），第二个分区会调整并改变它的宽度，但它似乎只是将地图中心向外推到右侧，而实际上并没有改变大小。。有什么想法吗？@user3199840不知道你的意思。如果右侧的宽度为100%，变为50%，则其左侧将被推到右侧。如果它没有移动，那就意味着大小没有改变，不是吗？我已经编辑了我的第一篇文章。也许这与地图设置有关。但是当地图分割变为50%时，地图的中心并没有调整到新的分割宽度，而是被推到可见分割之外。很难解释。我认为问题在于地图。我将开始另一个帖子。谢谢你的帮助@user3199840根本不是：）问题是因为

width:100%；位置：固定；显示：内联块

。您必须移除它们才能使其正常工作。

<input type="button" id="btn" value="toggle" />
<div id="wrapper">
    <div id="left">Foo</div>
    <div id="right">Bar</div>
</div>

#wrapper, #right {
    overflow: hidden;
}
#left {
    float: left;
    width: 50%;
    background-color: #ffa;
}
#right {
    background-color: #faf;
}
.hide {
    display: none;
}

var left = document.getElementById('left');
document.getElementById('btn').onclick = function() {
    left.className = left.className ? '' : 'hide';
};

<input type="button" id="btn" value="toggle" />
<div id="wrapper">
    <div id="left">Foo</div>
    <div id="right">Bar</div>
</div>

#wrapper {
    display: table;
    width: 100%;
}
#left, #right {
    display: table-cell;
}
#left {
    background-color: #ffa;
}
#right {
    background-color: #faf;
}
.hide {
    display: none !important;
}

var left = document.getElementById('left');
document.getElementById('btn').onclick = function() {
    left.className = left.className ? '' : 'hide';
};