展開父浮動子div

Question

我有一個佈局，應該有幾個內容框與全寬旋轉div在它後面。到目前爲止，我已經能夠創建this jsfiddle example。以下是佈局將會變得簡單的草圖：see here。

如果您看到我的jsfiddle，也可以通過視覺輔助來解釋問題，但我在這裏也會很快解釋它。

外部內容框包含2個子div，其中一個帶有旋轉的div，正確地圍繞它的父級環繞。另一個內容框將持有內容。它具有固定的高度，但內容將變得靈活。所以它需要將父div伸展到與父母相同的高度。

我已經嘗試了溢出，顯示，浮動等幾件事情，但似乎沒有工作。

這是我是如何放置的div：

<div class="content-outer"> 
    <div class="content-inner">Content comes here</div> 
    <div class="extended rotation"></div> 
</div> 

部分CSS

.content-outer { 
    width: 100%; 
    height: 100px; /* This should adjust to the inner-content height */ 
    background: #FF0000; /* Red */ 
    position: relative; 
    display:block; 
    float: left; 
} 

.content-inner { 
    width: 100%; 
    min-height: 100px; 
    background: #00FF00; /* Green */ 
    float: left; 
} 

.extended { 
    height: 100%; 
    margin: 0 -100%; 
    top: -20px; 
    background: #666; /* Gray */ 
    position: relative; 
    z-index: -1; 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 

.rotation { 
    transform:rotate(-2.5deg); 
    -ms-transform:rotate(-2.5deg); /* IE 9 */ 
    -webkit-transform:rotate(-2.5deg); /* Safari en Chrome */ 
    -webkit-backface-visibility: hidden; /* Reduce jagged edge */ 
    outline: 1px solid transparent; /* Reduce jagged edge */ 
} 

如果我的任何意圖還不清楚，請隨時索要更多的解釋！

Answer 1

如果您將內容作爲旋轉框的子項，則它們將根據內容增長。

你需要的是爲孩子設置反轉，所以它以某種方式回到正常位置。 http://codepen.io/anon/pen/HrceA

.content-outer { 
    margin:2em 0; 
} 
.extended { 
    background:gray; 
    padding:1em 0; 
    transform:rotate(-2deg); 
} 
.content-inner { 
    transform:rotate(2deg);/* opposite rotation makes to have 0deg rotation at screen*/ 
    background:#00FF00; 
    padding:1em; 
} 

<div class="content-outer"> 
    <div class="extended rotation"> 
     <div class="content-inner"> 
      Content comes here 
     </div> 
    </div> 
</div> 

.content-outer可能是一個旋轉，以避免額外div額外class :)

編輯 transform:skewY(2deg);工程太：

.extended { 
    background:gray; 
    padding:1em 0; 
    transform:skewy(-2deg); 
} 
.content-inner { 
    transform:skewy(2deg); 
    background:#00FF00; 
    padding:1em; 
} 

http://codepen.io/anon/pen/mBhcF