css - 将父级扩展为 float 子级 div

Question

我的布局应该有几个内容框，后面有一个全宽旋转的 div。到目前为止，我已经能够创建 this jsfiddle example .这是布局的简单草图:see here .

如果您看到我的 jsfiddle，也可以通过视觉帮助解释该问题，但我也会在此处进行简短解释。

外部内容框包含 2 个子 div，其中一个带有旋转的 div，正确地环绕在它的父元素周围。另一个用于保存内容的内部内容框。固定高度它确实有效，但内容将是灵活的。所以它需要将父 div 拉伸(stretch)到与其父级相同的高度。

我已经尝试过一些溢出、显示、 float 等方法，但似乎没有任何效果。

这是我放置 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

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

您需要将反向旋转设置为 child ，以便它以某种方式返回到正常位置。 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