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

将父项展开为浮动子div

1 个答案: