javascript - 在流体布局中将 div 包裹在绝对定位的 div 下方

Question

我有一个随浏览器缩放的流畅图像旋转器。我必须将旋转器内的图像设置为绝对，但这会影响布局，其中“正文内容”位于图像后面。如果图像设置为相对，则图像旋转器不起作用。我整天都在看这个，有人有什么想法吗？这是我的代码:

HTML:

<div id="main-image">
  <div id="rotator">
    <img src="image1.jpg" border="0" alt=""/>
    <img src="image2.jpg" border="0" alt="" /> 
    <img src="image3.jpg" border="0" alt="" />
  </div>
</div>
<div id="body-content"></div>

CSS:

#main-image {
  width: 100%;
  border: 1px solid blue;
}
#main-image IMG.active {
  z-index:10;
}
#main-image IMG.last-active {
  z-index:9;
}
#rotator {
  width: 100%;
  height: auto;
  position:relative;
}
#rotator img{
  position: absolute;    
  width: 100%;
  border: 1px solid red;
}
#body-content {
  margin-top: 15px;
  height: 50px;
  border: 1px solid red;
  width: 100%;
}

这是我的 fiddle :http://jsfiddle.net/fatfrank44/Q7vpD/8/

谢谢

Answer 1

Here is a fiddle.我所做的只是将 #main-image 的高度设置为其内部图像的高度，以便将 body-content div 向下推。

$('#main-image').height($('#rotator img:first').height());

Fiddle with window resize and working slider