将父项展开为浮动子div

我有一个布局，应该有几个内容框与全宽旋转div在它后面。 到目前为止，我已经能够创建这个jsfiddle示例。 以下是布局将要进行的简单描述：请参阅此处。

如果你看到我的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 */
}

如果我的意图不清楚，请随时索取更多解释！

---

如果您将内容作为旋转框的子项，则它们都会根据内容增长。

你需要的是为孩子设置反向旋转，所以它以某种方式回到正常位置。 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可以是一个旋转以避免额外class额外的div :)

编辑 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

链接地址: http://www.djcxy.com/p/15565.html

上一篇: Expand parent to floating child div

下一篇: How to prevent right div from collapsing under left float on full page layout