根据孩子的身高扩展父div的高度

I know there are several similar questions answered here, but I can not seem to get this working.

我知道这里有几个类似的问题,但我似乎无法让这个工作。

I have two parent divs - one is like a frame with a border and padding, the second is a solid black background, and the third is where a transparent image will actually be placed. I need the two parent divs to expand their height based on the image's height.

我有两个父div - 一个是带边框和填充的框架,第二个是纯黑色背景,第三个是实际放置透明图像的地方。我需要两个父div来根据图像的高度扩展它们的高度。

I have this working for the div with the black background, but I can't get the parent div with the border to expand it's size:

我有这个为黑色背景的div工作,但我不能得到带边框的父div扩大它的大小:

Here is the fiddle: http://jsfiddle.net/vpdj4kst/

这是小提琴:http://jsfiddle.net/vpdj4kst/

#builder_container {
  width: 100%;
  /*overflow: auto;*/
  position: relative;
  padding: 8px;
  border: 1px solid #ccc;
  margin-bottom: 15px;
  display: inline-block;
  clear: both;
}
#builder_contents {
  background: #000;
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}
.builder_img {
  width: 100%;
  height: auto;
  position: absolute;
}

<div id="builder_container">
  <div id="builder_contents">
    <img class="builder_img" src="image.png" />
  </div>
</div>

1 个解决方案

#1

This is because you have set the image to position: absolute; which will take it out of the flow causing the parent elements to act as if it wasn't there.

这是因为您已将图像设置为position:absolute;这将把它从流程中取出,导致父元素表现得好像它不在那里一样。

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements.

相对定位的元素仍然被认为是文档中正常的元素流。相比之下,绝对定位的元件从流动中取出,因此在放置其他元件时不占用空间。

Position (https://developer.mozilla.org/en-US/docs/Web/CSS/position)

Remove position: absolute; from .builder_img and the parent containers will react to its height.

删除位置:绝对;从.builder_img和父容器将对其高度作出反应。

#builder_container {
  width: 100%;
  /*overflow: auto;*/
  position: relative;
  padding: 8px;
  border: 1px solid #ccc;
  margin-bottom: 15px;
  display: inline-block;
  clear: both;
}
#builder_contents {
  background: #000;
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}
.builder_img {
  width: 100%;
  height: auto;
}

<div id="builder_container">
  <div id="builder_contents">
    <img class="builder_img" src="http://coolspotters.com/files/photos/1036167/adidas-st-girls-straw-hat-profile.png" />
  </div>
</div>

#1