Question

我在DIV中有一张图片。我想＆＃34; overhang＆＃34; DIV外面的图像有点小，所以我把它放在绝对位置，父容器放在相对位置。当我这样做时，父DIV不再调整其高度以包含图像。我怎么能这样做？

HTML

def lastCommit = sh returnStdout: true, script: 'git log -1 --pretty=%B'

if (lastCommit.contains("[maven-release-plugin]")){
            sh "echo  Maven release detected"  //dont trigger build

        } else {
            sh "echo Last commit is not from maven release plugin" //do build steps 
            <..build Job...>
        }

CSS

      <div class=".twelve.columns" id="header">
        <div id="logoWrapper">
                <img src="https://nbson.com/sni/images/logo.png" class="ssImg">
                <div class="clr"></div>
        </div>      
      </div>

JSFiddle

Answer 1

绝对定位的元素完全从文档流中移除，因此它们的尺寸不能改变其父级的尺寸。如果你真的不得不在保持孩子们的位置的同时实现这种影响：绝对，你可以使用JavaScript [...]
来实现

要获得不使用javascript描述的效果，您可以使用底部或顶部的负值。我还为您的具体示例更新了JSFiddle。

.ssImg{
	width:100%;
}
.clr{
	clear:both;
}
#header{
	 margin-top:0;
	 background:#000;	 
	 position:relative;a
	 width:100%;
	 border:1pt solid pink;	
}

#logoWrapper{
	width:15%;
	min-width:120px;
	margin-left:10px;
	position:relative; /* this is new */
        bottom: -40px; /* this is new */
}

<div class="twelve columns" id="header">
    <div id="logoWrapper">
            <img src="https://nbson.com/sni/images/logo.png" class="ssImg">
            <div class="clr"></div>
    </div>      
</div>

Answer 2

这个怎么样？

html, body {   
  height: 100%;
  padding: 20px;
}

.ssImg{
   width: 100%;
}

#header{
  background-color: #000;	 
  position: relative;
  width: 100%;
  height: 100%; /* Set the height what you want */
  border: 1pt solid pink;	
}

#logoWrapper{
  width: 15%;
  min-width: 120px;
  position: absolute;
  top: -15px;
  left: -25px;
}

<div id="header">
  <div id="logoWrapper">
    <img src="https://nbson.com/sni/images/logo.png" class="ssImg">
  </div>      
</div>

Answer 3

首先：

如果你想在<div class="twelve columns">之类的元素上使用两个类，而不是<div class=".twelve.columns">

其次，关于你的问题：

从流中删除绝对定位的元素，因此在计算父元素的维度时不再考虑这些元素。

您可以通过在元素上明确设置所需的height和width来解决此问题。

如果孩子绝对定位，div不会调整到高度

3 个答案: