[英]Expand parent to floating child div
I have a layout that is supposed to have several content boxes with a full width rotated div behind it. 我的布局应该有几个内容框,其后有一个全角旋转div。 So far i've been able to create this jsfiddle example . 到目前为止,我已经能够创建此jsfiddle示例 。 Here is a simple sketch of what the layout is going to be: see here . 这是布局的简单示意图: 请参见此处 。
The problem is also explained with visual aid if you see my jsfiddle, but I'll shortly explain it here too. 如果您看到我的jsfiddle,也可以通过视觉帮助来解决该问题,但是我也将在此简短地进行解释。
The outer content box holds 2 child divs, one with the rotated div that wraps around properly around it's parent. 外部内容框包含2个子div,一个子div具有旋转的div,该div正确环绕其父级。 And another inner-content box that is going to hold the content. 还有另一个内部内容框,用于容纳内容。 With a fixed height it does work, but the content is going to be flexible. 具有固定的高度,它确实可以工作,但是内容将变得灵活。 So it needs to stretch the parent div to the same height as it's parent. 因此,需要将父div拉伸到与父div相同的高度。
I have tried several things with overflow, display, float etc. but nothing seems to be working. 我已经尝试了一些与溢出,显示,浮动等有关的东西,但似乎没有任何作用。
This is how I've placed the divs: 这就是我放置div的方式:
<div class="content-outer">
<div class="content-inner">Content comes here</div>
<div class="extended rotation"></div>
</div>
Partial CSS 部分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 */
}
If any of my intentions are unclear, feel free to ask for more explanation! 如果我的意图不清楚,请随时要求更多解释!
If you have the content as child of the rotated box , they will both grow according to content. 如果您将内容作为旋转框的子项,则它们都将根据内容而增长。
What you need is to set reversed rotation to child , so it sets back somehow to normal position. 您需要将child设置为反向旋转,以便以某种方式将其设置为正常位置。 http://codepen.io/anon/pen/HrceA 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
could be the one rotated to avoid extra div
for extra class
:) .content-outer
可以是一个轮换以避免额外的class
额外div
:)
EDIT transform:skewY(2deg);
编辑 transform:skewY(2deg);
works too : 也可以:
.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://codepen.io/anon/pen/mBhcF
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.