jquery - CSS 以 100% 宽度滚动？

Question

嘿，我的网站有问题 http://www.probeast-network.com/index.php

当您访问该站点时，您将能够看到 100% 的宽度，但是，一旦您开始调整窗口大小时，您将看到设置为 100% 宽度的图像根本没有改变。我尝试了多种方法，但是，我似乎无法弄清楚。它可能与 jquery slider 有关，但这以前从未引起任何问题。这是代码

脚本代码:

<script type="text/javascript">
$(document).ready(function() {
$('.slider').each(function(ware) {
    $(this).cycle({
        timeout: 80000,
        speed:   400,
        sync:    false,
        pager:  '.pager',
        pagerAnchorBuilder: function(i) {
            if (ware == 0)
                // for first slideshow, return a new anchro
                return '<a href="#">'+(i+1)+'</a>';
            // for 2nd slideshow, select the anchor created previously
            return '.pager a:eq('+i+')';
        }
    });
});
});
</script>

HTML代码:

<div id="pos">
  <div class="pager"></div>

  <div class="slider"
  data-cycle-slider="> div"
  >

  <div class="size"><img class="imgsize" src="<?php echo $bild_giveaway;?>" alt=""/></div>

  <div class="size"><img class="imgsize" src="<?php echo $bild_video;?>" alt=""/></div>

  <div class="size"><img class="imgsize" src="<?php echo $bild_promine ?>" alt="" /></div>

  <div class="size"><img class="imgsize" src="<?php echo $bild_checkout ?>" alt="" /></div>

  <div class="size"><img class="imgsize" src="<?php echo $bild_tips ?>" alt="" /></div>

  </div>

  <div class="slider"
  data-cycle-slider="> div"
  >

  <div class="size1"></div>  

  <div class="size2"></div>

  <div class="size3"></div>

  <div class="size4"></div>

  <div class="size5"></div>

  </div>

</div>

CSS 代码:

#pos {
position: relative;
width: 100%;
z-index: 2;
margin: 0px auto;
}

.imgsize {
position: absolute;
width: 100%;
left: 0%;
}

.slider {
width: 100%;
z-index: -95;
text-align: center;
margin: 0px auto;
position: absolute;
top: 0px;
opacity: 1;
}

.size {
position: absolute;
min-width: 1290px;
margin: 0px auto;
right: 0%;
z-index: -14;
-webkit-box-shadow: 0px 0px 46px 5px;
box-shadow: 0px 0px 46px 5px;
width: 100%;
min-height: 784px;  
}

如果有人知道这个问题的解决方案，请告诉我。我已经排除故障 6-7 个小时了.. :(

此致，Jan Breuer

Answer 1

您的大部分元素(.bottom、.laSTLine、.imagesheader、.menudiv、.....)得到，将 min-width 设置为 1290px 删除如果您希望宽度“不滚动”，则所有最小宽度

此外，您的 slider 具有由 javascritp 设置的宽度，因此您可以取消使 slider 获得特定宽度的 javscript 函数，或者使用下面的代码通过 css 取消它。

.slider {
    width: 100% !important;
}

类 .size 相同，它获得最小宽度和由 javascritp 设置的宽度。