Question

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

我有这个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进行基本的淡入淡出效果

使用上述内容，我的wrapper div与slideshow div的身高相同。如何让wrapper扩展到浏览器窗口的底部，同时允许slideshow从其中的图像中获取其高度？我还希望将slideshow div水平居中。

感谢。

更新：已解决。
感谢@Alvaro

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

Answer 1

如果你想要响应，你可以设置#slideshow（或#wrapper）的宽度，比如70％然后设置一个15％的边距左边（15 * 2 + 70 = 100）

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

可行。

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

你可以删除#wrapper

Answer 2

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

margin:auto;

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

height:100%;

JSFiddle

Answer 3

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

<!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>

如何在网站内容后面创建居中的图像幻灯片

3 个答案: