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%;
}

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

谢谢

Answer 1

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

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

调整窗口大小和工作滑块