更新时间:2022-10-15 07:46:36
尝试:
.main {
background:tomato;
float:left;
width:600px;
margin-top:30px; / *以上布局调整* /
/ * removed overflow:hidden; * /
/ *总是使用clearfix方法* /
}
.article_header {
background:SteelBlue;
color:#fff;
position:absolute;
bottom:100%;
margin-bottom:10px; / *中和父容器的填充* /
left:-10px; / *中和父容器的填充* /
padding:10px; / *中和父容器的填充* /
right:-330px; / *中和父容器的填充* /
}
.main>文章{
position:relative;
}
.aside {
background:cyan;
float:right;
width:300px;
margin-top:30px; / *以上版面调整* /
}
要进行调整,请使用margin属性。
I'm trying to visually position a DIV (article header) outside of it's parent DIV (article) container. Is this possible?
My mark-up example is available here - http://codepen.io/calebo/pen/CGoyD
Try this:
.main {
background: tomato;
float: left;
width: 600px;
margin-top: 30px; /* above Layout adjustment */
/* removed overflow: hidden; */
/* use always clearfix method instead */
}
.article_header {
background: SteelBlue;
color: #fff;
position: absolute;
bottom: 100%;
margin-bottom: 10px; /* to neutralize padding of parent container */
left: -10px; /* to neutralize padding of parent container */
padding: 10px; /* to neutralize padding of parent container */
right: -330px; /* to neutralize padding of parent container */
}
.main > article{
position: relative;
}
.aside {
background: cyan;
float: right;
width: 300px;
margin-top: 30px; /* above Layout adjustment */
}
To make adjustments, play with margin property.