Question

我在父 div 中有两个子 div。第一个子 div 为宽度的 32%，第二个子 div 为宽度的 68%。如果第一个子 div 设置为 display: none;，如何使第二个子 div 从宽度的 68% 变为宽度的 100%？谢谢

.parent {
    width: 400px;
    height: 200px;
    position: relative;
    float: left;
    display: inline-block;
}

.child1 {
    width: 32%;
    height: 100%;
    float: left;
    background-color: green;
}

.child2 {
    width: 68%;
    height: 100%;
    float: left;
    background-color: red;
}

<div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

Answer 1

如果您使用 flex 而不是浮动，将 display: none 设置为一个会为您调整另一个：

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.child1').classList.toggle('hidden');
})

.parent {
    width: 400px;
    height: 200px;
    position: relative;
    display: flex;
}

.child1 {
    flex: 0 0 32%;
    background-color: green;
}

.child2 {
    flex: 1 1 auto;
    background-color: red;
}

.hidden {
  display: none;
}

button {
  margin-bottom: 1em;
}

<button>Toggle child1 visibility</button>

<div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

Answer 2

我会利用 flex 的魔力！

flex: 0 0 32%; 在 child1 上将宽度设置为 32%。

flex: 1; 到 child2 的意思是：填满所有可用空间。所以如果 child1 消失了，child 2 会填满所有剩余的空间。

.parent {
  width: 400px;
  height: 200px;
  display: flex;
}

.child1 {
  flex: 0 0 32%;
  background-color: green;
}

.child2 {
  flex: 1;
  background-color: red;
}

<div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

Answer 3

这里可以使用 Flexbox 代替浮动属性。如需更多了解，请参阅此link。

因此在 flexbox 中，您可以通过以下代码实现：-

:after

.pvw-title { 
    font-size:0px;
}

.pvw-title:after {
        content: "Hello";
        font-size:15px !important;
}

Answer 4

这是如何使用您的方法实现这一目标。

  <div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

.parent {
    width: 400px;
    height: 200px;
    font-size: 20px;
    font-weight: bold;
    color: white;
  }

  .child1 {
    width: 32%;
    height: 100%;
    float: left;
    background-color: green;
  }

  .child2 {
    width: 100%;
    height: 100%;
    background-color: blue;
  }

自动调整子div的大小以填充父div的可用空间

4 个答案: