如果另一个div隐藏或不隐藏，div的宽度会调整吗？

Question

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

有什么想法可以做到这一点吗？ （我知道如何用 jquery 显示/隐藏，我正在考虑 HTML）

Answer 1

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

然后，如果该元素通过

width:50%

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

演示

HTML：

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

CSS：

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

JS：

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

Answer 2

另一种可能性：使用

display: table-cell

。与浮动相比，这具有以下优点：两列具有相同的高度，并且设置包装器的高度也会为两列设置它。

演示

HTML：

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

CSS：

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

JS：

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

Answer 3

您可以使用 Flexbox 和 JQuery 对任意数量的 div 执行此操作。

https://jsfiddle.net/L8kfty5n/5/

function hideandshow() {
  if ($('.hide').is(":checked"))
    $("#div1").show();
  else
    $("#div1").hide();
}

.container {
  display: flex;
  flex-flow: row nowrap;
}

#div1,
#div2,
#div3 {
  flex-grow: 1;
  flex-basis: calc(100% / 3);
  border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="container">
  <div id="div1">This disappears</div>
  <div id="div2">This grows</div>
  <div id="div3">This grows too</div>
</div>
<input class="hide" type="checkbox" name="hide" value="1" onchange="hideandshow()" checked/>

Answer 4

你们这些东西很简单，只需给第一个 div 的最小宽度为 50％，第二个为 100％