在寬度，填充和邊框上平滑CSS'摺疊'過渡

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環繞，導致高度增加，推後續元素向下對DIV padding和/或border。

• 我試過box-sizing: border-box，但是這個效果也很清晰，換行效果也不錯。
• 我試圖過渡padding和border-width以及 width，但它仍然包裝。我可以嘗試不同的 持續時間，但它仍然有一個奇怪的效果。
• 我試圖忽略填充和邊框，因爲它們不透明，只是 添加一個margin-left，但這並不影響高度和「向下推」。
• 我可以修復高度，但我實際上希望高度爲自動，因爲每個 部分可以包含各種大小的內容。

如何在帶有填充/邊界元素的div上實現這種摺疊過渡？

如果可以通過更新真正受歡迎的小提琴演示答案。

Answer 1

到目前爲止，最好的解決方案我找到的是將填充和邊框寬度轉換爲0，但僅限於左側和右側，而不是頂部和底部。那樣的話，崩潰看起來只是在寬度上，divs根本不會改變高度。

.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爲好。

Answer 2

嘗試設置「填充：0」到每個.collapsed>子部分邊界盒，當然設置一個過渡

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