Question

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

有问题

当您访问该网站时，您将能够看到100％的宽度，但是，一旦开始调整窗口大小，您将看到设置为宽度100％的图像根本没有变化。我尝试了很多东西，然而，我似乎无法弄明白。它可能与jquery滑块有关，但这之前从未引起过任何问题。这是代码

脚本代码：

<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 code：

<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

看起来像类.slider的div，设置了一些内联css。更具体地说，它的宽度和高度分别设置为1290px和784px。

Answer 2

你的大多数元素（.bottom，.lastline，.imagesheader，.menudiv，.....）得到，min-width设置为1290px，如果你想要的话，删除所有的最小宽度宽度“不滚动”

你的滑块也有一个由javascritp设置的宽度，所以要么你能够取消javscript函数，使得滑块得到一个特定的宽度，要么你用css取消它，使用下面的代码。

.slider {
    width: 100% !important;
}

类.size同样可以获得javascritp设置的最小宽度和宽度。

CSS滚动宽度为100％？

2 个答案: