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

Question

我有一个container div(下图中的背景)和一个包含图像(社交图标)的inner 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;  }