html - 元素根据 parent 和 sibling 调整宽度

Question

我已经设置了父 div 和它的 3 个子 div。现在，第三个 child 被隐藏了。我已将第一个 child 的宽度设置为 20%，并希望第二个 child 自动占用剩余的宽度，而无需明确设置。第 3 个 child 的宽度是 20%，当它未隐藏时，它应该占父级宽度的一部分，而第 2 个 child 应该相应地重新调整它的宽度。

<div id="parent" style="background-color: pink;">
    <div id="child1" style="background-color: gray; display: inline-block; width: 20%;">
        div1
    </div>

    <div id="child2" style="background-color: blue; display: inline-block">
        div2
    </div>

    <div id="child2" style="background-color: violet; display: hidden; width: 20%;">
        div3
    </div>
</div>

Answer 1

这个可以通过flex布局来实现。以下是您案例的代码片段:

#parent {
  display: flex;
  flex-direction: row;
}
#child1 {
  flex-basis: 20%;
}
#child2 {
  flex: 1;
}
#child3 {
  display: none;
}

<div id="parent" style="background-color: pink;">
    <div id="child1" style="background-color: gray;">
        div1
    </div>

    <div id="child2" style="background-color: blue;">
        div2
    </div>

    <div id="child3" style="background-color: violet;">
        div3
    </div>
</div>

一些解释:

1. 将#parent的显示设置为flex，为所有子元素启动flex布局。
2. 将flex-direction设为row，使子元素水平显示。
3. 将#child2的flex设置为1，这意味着它将缩小或扩展以占据中所有可用空间# parent 。

请注意，所有内联 display CSS 规则都已删除。一旦启用 flex 布局，它们就不是必需的。