在流体布局中将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%;
}

这是我的小提琴： http : //jsfiddle.net/fatfrank44/Q7vpD/8/

谢谢

Answer 1

这是一个小提琴。 我所做的只是将#main-image的高度设置为其中的图像的高度，以便将body-div降低。

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

调整窗口大小和工作滑块的小提琴