展开父浮动子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