gpt4 book ai didi

html - 在宽度、填充和边框上平滑 CSS 'collapse' 过渡

转载 作者:行者123 更新时间:2023-11-28 17:26:38 24 4
gpt4 key购买 nike

我正在尝试创建一个过渡,通过更改宽度、填充和边框,它可以有效地“折叠”一个 div 和它包含的 float 元素。

我做了一些调查,你可以在这里看到: http://jsfiddle.net/p38b6ndb/1

包含示例:

HTML:

<div>
<div class="section">
<div class="sub-section">label</div>
<div class="sub-section">field</div>
</div>
<div class="section collapsible">
<div class="sub-section">label</div>
<div class="sub-section">field</div>
</div>
<div class="section">
<div class="sub-section">label</div>
<div class="sub-section">field</div>
</div>
</div>

CSS:

.section {
float: left;
width: 25%;
}

.section.collapsible {
opacity: 1;
transition: opacity linear 1s, width linear 1s;
}

.section.collapsible.collapsed {
width: 0;
opacity: 0;
}

.sub-section {
width: 50%;
float: left;
height: 42px;
}

场景:第 2 部分应该折叠,第 3 部分与第 1 部分一起向左移动。

问题:如果我在折叠的 div 上有 padding 和/或 border,当宽度达到一定数量时折叠时 div 环绕,导致高度增加,将后续元素向下推。

  • 我尝试使用 box-sizing: border-box 但它有一个清晰的包装效果也一样。
  • 我尝试转换 paddingborder-width 以及width,但它仍然会换行。我可以尝试不同的持续时间,但它仍然有一个奇怪的效果。
  • 我试图忽略填充和边框,因为它们变得不透明,只是添加一个margin-left,但这不会影响高度和
    '向下推'。
  • 我可以固定高度,但实际上我希望每个高度都是自动的部分可以包含各种大小的内容。

如何在带有填充/边框元素的 div 上实现折叠过渡?

如果可以通过更新 fiddle 来证明答案,那将是非常受欢迎的。

最佳答案

尝试给每个.collapsed > sub-section-border-box设置'padding: 0',当然还要设置transition

demo

.section.collapsible .sub-section-border-box {    
padding: 10px;
border-width: 2px;
transition: all linear 1s;
}

.section.collapsible.collapsed .sub-section-border-box{
padding: 0;
border-width: 0;
}

关于html - 在宽度、填充和边框上平滑 CSS 'collapse' 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27065577/

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