Question

我正在尝试创建一个过渡，通过改变宽度，填充和边框，有效地“折叠”它包含的div和浮动元素。

我做了一些调查，你可以在这里看到： 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;
}

场景：第二部分应该会崩溃，第三部分会在第一部分左侧移动。

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

我试过box-sizing: border-box，但这有一个明确的包装效果也很好。
我尝试转换padding和border-width以及。{ width，但它仍然包裹着。我可以尝试不同的持续时间，但仍然有一个奇怪的效果。
我试图忽略填充和边框，因为它们变得不透明，而且只是添加margin-left，但这不会影响身高和 '向下推'。
我可以修复高度，但实际上我希望高度可以自动调整部分可以包含各种大小的内容。

如何在带有填充/边界元素的div上实现此崩溃转换？

如果可以通过更新非常受欢迎的小提琴来证明答案。

Answer 1

尝试设置＆＃39;填充：0＆＃39;每个.collapsed＆gt; sub-section-border-box，当然还设置了转换

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

Answer 2

到目前为止，我发现的最佳解决方案是将填充和边框宽度转换为0，但仅限于左侧和右侧，而不是顶部和底部。这样，崩溃只出现在宽度上，div根本不会改变高度。

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

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

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

.section.collapsible.collapsed .sub-section {    
    padding: 10px 0;
    border-width: 2px 0;
}

演示：http://jsfiddle.net/p38b6ndb/6/

这也意味着我仍然可以使用box-sizing: border-box。

顺利的CSS＆＃39;崩溃＆＃39;宽度，填充和边框过渡

2 个答案: