Html 元素根据父级和同级调整宽度

我已经设置了父div及其3个子div。现在，第三个孩子被隐藏了。我已将第一个子项的宽度设置为20%，并希望第二个子项在不明确设置的情况下自动获取剩余宽度。第三个孩子的宽度是20%，当它被取消隐藏时，它应该占父母宽度的一部分，而第二个孩子应该相应地重新调整它的宽度

<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>

第一组
第二组
第三组

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

#父级{
显示器：flex；
弯曲方向：行；
}
#孩子1{
弹性基准：20%；
}
#孩子2{
弹性：1；
}
#孩子3{
显示：无；
}

第一组
第二组
第三组

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

#父级{
显示器：flex；
弯曲方向：行；
}
#孩子1{
弹性基准：20%；
}
#孩子2{
弹性：1；
}
#孩子3{
显示：无；
}

第一组
第二组
第三组

听起来你想要flexbox。听起来你想要flexbox。