0

我目前正在构建一个 WordPress 网站，但有一个滑块问题。

幻灯片图像宽 1200 像素，但网站宽 945 像素。我需要图像始终保持居中。当浏览器拉伸到超过 1200 像素宽时很好，但是一旦您将大小调整到 1100 像素左右并且更小，滑块图像不会溢出页面的左侧，它会碰到左侧浏览器的边缘并且不会不再居中并向右推，所以我的图像的额外部分应该溢出浏览器，但这不是出于某种原因。

这是页面向下滚动时的外观图像，文字应始终在左侧与其余内容对齐，例如其下方的图像，两侧大约有 100px，但在右侧淡出，所以它需要走得更远，然后是 945px 宽度：

这是我的 CSS 及其缓动滑块 WordPress 插件：

section#slider-wrapper {
width:100%;
height:330px;
margin-bottom: 32px;
position: relative;
overflow: visible;
z-index: 1;
-webkit-box-shadow: 0px 0px 11px #eee;
   -moz-box-shadow: 0px 0px 11px #eee;
        box-shadow: 0px 0px 11px #eee;      
background: url(images/slider-bg.jpg) #fff center repeat;       
}



#slider-wrapper #slides {
z-index:100;
height:330px;
width: 1200px;
margin: 0 auto;
position: relative;
 }
 #slider-wrapper .slides_container {
width:100%;
overflow:hidden;
position:absolute;
 }
 #slider-wrapper .slides_container div.slide, #slider-wrapper .slides_container div.slide img {
width:100%;
height:330px;
display:block;
  }
  #slider-wrapper .slides_container div.slide img {
width:1200px;
height:330px;
display:block;
  }

这是HTML：

<section id="slider-wrapper">
<div id="slides">
        <div class="slides_container">
         <!-- Easing Slider -->
             <div class="lof-container" style="height:330px;padding-right:0px;padding-top:0px;padding-left:0px;padding-bottom:0px;">
             <div class="lof-slidecontent" id="lofslidecontent45" style="border:0px solid #ccc;width:1200px;height:330px;">
             <div class="preload" style="padding-top:1px\9;background:url(wp-content/plugins/easing-slider/images/indicator.gif) no-repeat center center #;">

       </div>
        <div class="lof-main-outer" style="background: #;width:1200px;height:330px;">
            <ul class="lof-main-wapper">
               <li><img src="wp-content/uploads/2012/08/slide_1.jpg" style="width:1200px;" alt="" /></li>       
               <li><img src="wp-content/uploads/2012/08/slide_2.jpg" style="width:1200px;" alt="" /></li>
           </ul>
         </div>
        </div>
      </div><!-- End of Easing Slider -->       
     </div>
</div>  
<div class="clear"></div>
  </section><!-- END OF SECTION#SLIDER-WRAPPER -->

我已经尝试过溢出，最小宽度似乎无法让它工作/

这是它在我的浏览器中如何工作的 jFiddle 版本，红线永远不会溢出。

http://jsfiddle.net/strohy85/8dQ96/

4

0 回答 0