当内部div位置改变时调整容器div的大小

Question

我有一个容器 div（下图中的背景）和一个包含图片（社交图标）的内部 div。

我希望我的图像溢出容器div的边界（如图中所示），但同时我希望容器调整大小：当我的图像重叠其顶部边框时，它的高度会降低。所以不应该有那么低的空边框：容器的行为就像图像是固定的一样，而它们不是。

这是图像：

我该怎么做？

编辑：这是我想要获得的（好吧，我的意思是这样的：P）

容器div的高度（您看到的深色背景）由其内容动态设置。

Answer 1

尝试将内部div与position:absolute的位置相对于父div 那么你可以通过调整顶部，左侧，底部和右侧属性来玩弄内部div。

// css

body{ background: url("http://1.bp.blogspot.com/-OowkzBiSOJU/Ud0G3T325lI/AAAAAAAACfY/syhVEMuuSOw/s1600/tiny_grid.png") repeat scroll 0 0 transparent; color: #666; height: 100%; padding: 0; font-family: 'Lora',Georgia,Serif; font-size: 18px; line-height: 29px; border-top: 5px solid #4690B3; }
.clr { clear:both; float:none; }
.ct-wrapper {    padding:0px 20px;    position:relative;    max-width:1230px;    margin: 0 auto;  }
.header-wrapper {
  background: #fff;  border-bottom: 1px solid #ccc;  display: inline-block;  float: left;  width: 100%;  }

/***** Optin Form CSS *****/
.opt-in .inner {  background: url("http://3.bp.blogspot.com/-YfUnP1wOFzQ/Ud0G21XXRWI/AAAAAAAACfQ/Hg5Gakd69tQ/s1600/home-bg.png") repeat scroll 0 0 transparent;  padding: 10px 0 0;  font-style: italic;  color: #ccc;  text-shadow: 0 1px 1px #000000; margin-top:50px;height:50px; }
.opt-in .opt-in-wrap {  margin-right: 40%; }
.opt-in .info {  float: left;  width: 80%;  }

/*****************************************
Responsive styles
******************************************/
@media screen and (max-width: 1024px) {
#header, .header-right { float: none; text-align: center; width: 100%; }
.header-right .widget-content { margin: 0; }
}
@media screen and (max-width: 960px) {
.ct-wrapper{    padding:0 15px;  }
.main-wrapper, .opt-in .opt-in-wrap{    margin-right:0;    width:100%;  }
.sidebar-wrapper{  float: left; width: auto;  margin-left: 20px;  }
.nav-menu ul { text-align: center; }
.nav-menu ul li { float: none; }
.opt-in .inner .ct-wrapper {  padding: 0 48px; }
.opt-in .info {  text-align: center;   }
.opt-in .signup-form {  margin-top: 30px;  width: 95%;  float: left;  }
#subbox {  width: 60%;  }
}
@media screen and (max-width: 768px){
#header p.description { margin: 0; }
.header-right { display: none; }
#comment-editor { margin:10px; }
.footer { width: 50%; }
}
@media screen and (max-width: 500px){
#header img { width:100%; }
.opt-in .inner .ct-wrapper {  padding: 0 10px; }
}
@media screen and (max-width: 420px){
.comments .comments-content .datetime{    display:block;    float:none;    }
.comments .comments-content .comment-header {    height:70px;    }
}
@media screen and (max-width: 320px){
.footer { width: 100%; }
.ct-wrapper{ padding:0; }
.post-body img{  max-width: 220px; }
.comments .comments-content .comment-replies {    margin-left: 0;    }
}
/*****************************************
Hiding Header Date and Feed Links
******************************************/
h2.date-header{display:none;}

.opt-in .social-div {  
    background: rgba(0, 0, 0, 0.0);  
    border: none;  
    float: right;  
    font-size: 16px; 
    text-align: center; 
    position: absolute;
    top: -55px;


}
.opt-in .social-div .form-inner {  font-size: 16px;    margin: 35px;  }