0

我正在尝试通过以下方式在我的网站内容后面创建幻灯片：

样机图像。

我有这个 HTML：

<div id="wrapper">
  <div id="slideshow">
    <img src="images/image1.jpg" alt="" />
    <img src="images/image2.jpg" alt="" />
    <img src="images/image3.jpg" alt="" />
  </div>
  <div id="content">This is content</div>
</div>

这个CSS：

#wrapper{
    width:100%;
    background: url(images/pattern.jpg) repeat left top;
}

#slideshow{
    position: relative;
}

#slideshow img{
    position: relative;
    left:0;
    right: 0;
    top:0;
}

#content{
   width: 1000px; /* just for testing */
   position: absolute;
   z-index: 10;
}

我正在使用jQuery cycle plugin基本的淡入淡出效果

使用上述方法， my 与 mywrapper div具有相同的高度slideshow div。我怎样才能使wrapper延伸到浏览器窗口的底部，同时允许slideshow从里面的图像中获取它的高度？我也想slideshow div水平居中。

谢谢。

更新：已解决。
感谢@Alvaro

这是最终代码http://jsfiddle.net/r6JYr/5/

4

3 回答 3

0

如果你想让它响应，你可以将#slideshow（或#wrapper）的宽度设置为70％，然后将margin-left设置为15％（15 * 2 + 70 = 100）

或者您可以设置像素宽度为 1500 像素，并将左侧值设置为 1500 像素，将左侧边距设置为 750 像素（如 1500/2= 750）

那行得通。

您还必须将 #slideshow 设置为 position:absolute;

你可以删除#wrapper

于 2012-06-21T13:16:36.767 回答
0

要水平居中图像，您可以设置：

margin:auto;

调整包装以占据整个高度：

height:100%;

JSFiddle

于 2012-06-21T13:25:34.487 回答
0

不不不，最好是给外部容器一个特定的宽度，将它的左右边距设置为自动，然后锻炼其余部分。看看这个：

<!doctype html>
<head>
<style>
#wrapper {width:600px; background: url(images/pattern.jpg) repeat left top; position: relative; margin: 0 auto; }
#slideshow {position: relative; }
#slideshow img {position: relative; left:0; right: 0; top:0;}
#content {
   width: 600px; /* just for testing */
   margin: 0 auto;
   z-index: 2;
   position: absolute;
   border: 1px #000 solid;
   top: 0;
}
#slideshow {
   width: 1000px; /* just for testing */
   margin-left: -200px;
   z-index: 1;
   border: 1px #f00 solid;
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="slideshow">
slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow slideshow 
  </div>
  <div id="content">This is content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
</div>
</div>
</body>
</head>
于 2012-06-21T13:39:49.447 回答