gpt4 book ai didi

html - 使用 Flexbox 时如何在 HTML 树中显示 "skip"div?

转载 作者:太空宇宙 更新时间:2023-11-04 16:19:20 25 4
gpt4 key购买 nike

我正在尝试在现有站点上使用 Flexbox,我需要以某种方式告诉浏览器“跳过”树中的几个 div。

让我用一个简单的例子来解释。我有这样的 HTML

<body style="display: flex;   
min-height: 100vh;
flex-direction: column;">
<div id="want_to_skip">
<div style="flex: 1;">
</div>
<div id="footer"></div>
</div>
</body>

我希望它表现得像这样

<body style="display: flex;   
min-height: 100vh;
flex-direction: column;">
<div style="flex: 1;">
</div>
<div id="footer"></div>
</body>

不幸的是,我需要“跳过”的 div 在那里,但无法将其删除。我该怎么办?

最佳答案

CSS Display L3介绍 display: contents :

The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.

#want_to_skip {
display: contents;
}

body {
display: flex;
margin: 0;
}
body > div {
flex: 1;
}
.wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
border: 1px solid;
}
.top {
flex: 1;
}
.want_to_skip {
display: contents;
}
<div>
<div class="wrapper">
<div>
<div class="top"> No skipping - Top </div>
<div class="bottom">No skipping - Bottom</div>
</div>
</div>
</div>
<div>
<div class="wrapper">
<div class="want_to_skip">
<div class="top"> Skipping - Top </div>
<div class="bottom">Skipping - Bottom</div>
</div>
</div>
</div>
<div>
<div class="wrapper">
<div class="top"> Desired - Top </div>
<div class="bottom">Desired - Bottom</div>
</div>
</div>

目前仅Firefox 37支持。

关于html - 使用 Flexbox 时如何在 HTML 树中显示 "skip"div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30443563/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com