Question

<div id="show01">
<img src="https://www.google.com/images/srpr/logo4w.png">
<img src="https://www.google.com/images/srpr/logo4w.png">
<img src="https://www.google.com/images/srpr/logo4w.png">
</div>

<div id="content"></div>

CSS

#show01{ 
    margin-top:14px; 
    position: relative;
    height:auto;
    border:thin solid blue;
}
#show01 img { 
  position: absolute;
    max-width:70%;
}
#content{
    background:#999;
    height:45px;
}

img必须为position:absolute，因为它们是jquery幻灯片放映的主题。

但是，在这种情况下，div content会出现在页面顶部，因为div #show01没有高度。它只是顶部的蓝线。

那么，如何让img position:absolute和show01保持身高img。

由于保持响应式布局，我无法以像素为单位定义div show01高度。

小提琴是here

Answer 1

这是半黑客（ish）..但您可以为#show01设置保证金。

尝试margin-bottom:24%; ..查看示例，让我知道这是否是您的目标。

Example

基本上你必须设置一个等于图像大小的边距来取代未指定的高度..当你调整浏览器的大小时，它似乎也会起作用。

如何保持父div的高度与绝对定位的img在里面？

1 个答案: