在流體布局中將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());

調整窗口大小和工作滑塊的小提琴