我已经设置了父 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>
最佳答案
这个可以通过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>
一些解释:
- 将
#parent
的显示设置为flex
,为所有子元素启动flex布局。 - 将
flex-direction
设为row
,使子元素水平显示。 - 将
#child2
的flex
设置为1
,这意味着它将缩小或扩展以占据中所有可用空间# parent
。
请注意,所有内联 display
CSS 规则都已删除。一旦启用 flex 布局,它们就不是必需的。
关于html - 元素根据 parent 和 sibling 调整宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43930728/