在CSS中将Div宽度设置为100％会破坏脚本的宽度

Question

我有一个Div滑块，可以在单击时换出Divs。如果将css更改为以下内容：

.hslide-item {width: 100%};

然后脚本将忽略整个div宽度。我需要.hslide-item来填充其父div 100％，而又不会破坏JS方面的东西。

// Add markup

$('.hslide').wrapInner('<div class="hslide-stage" />');


// Calculate Conditions & Set Vars

    // var playTimer = 9,
     slideQty = $('.hslide-item').length,
     slideWidth = $('.hslide-item').width(),
     stageWidth = $('.hslide-stage').width(),
     contWidth = $('.hslide').width();

    if ((slideQty*slideWidth) < contWidth) {
    $('.hslide-prev').addClass('hslide-prev-disabled').removeClass('hslide-prev');
    $('.hslide-next').addClass('hslide-next-disabled').removeClass('hslide-next');
    }
    else {
    $('.hslide-prev-disabled').addClass('hslide-prev').removeClass('hslide-prev-disabled');
    $('.hslide-next-disabled').addClass('hslide-next').removeClass('hslide-next-disabled');
    }

$(window).resize(function() {
    var slideQty = $('.hslide-item').length,
     slideWidth = $('.hslide-item').width(),
     stageWidth = $('.hslide-stage').width(),
     contWidth = $('.hslide').width();
    if ((slideQty*slideWidth) < contWidth) {
    $('.hslide-prev').addClass('hslide-prev-disabled').removeClass('hslide-prev');
    $('.hslide-next').addClass('hslide-next-disabled').removeClass('hslide-next');
    }
    else {
    $('.hslide-prev-disabled').addClass('hslide-prev').removeClass('hslide-prev-disabled');
    $('.hslide-next-disabled').addClass('hslide-next').removeClass('hslide-next-disabled');
    }
});

$('.hslide-next').live('click', function(event) {
     event.preventDefault();
    $('.hslide-stage').animate({left: -(slideWidth)}, 500, function() {
        $('.hslide-item:first').appendTo('.hslide-stage');
        $('.hslide-stage').css({left: '0px'});
  });
});

$('.hslide-prev').live('click', function(event) {
     event.preventDefault();
    $('.hslide-item:last').prependTo('.hslide-stage');
    $('.hslide-stage').css({left: -(slideWidth)});
    $('.hslide-stage').animate({left: '0px'}, 500, function() {
    });
});
function moveForward() {
$('.hslide-stage').animate({left: -(slideWidth)}, 500, function() {
        $('.hslide-item:first').appendTo('.hslide-stage');
        $('.hslide-stage').css({left: '0px'});
  });
}
var timer = setInterval(moveForward,playTimer);

$('.hslide, .hslide-prev, .hslide-next').hover(function(ev){
   // clearInterval(timer);
}, function(ev){
    // timer = setInterval( moveForward, playTimer);
});

body {
    font-family:sans-serif;
}

.hslide {
    height:100px;
    width:100%;
    background:#eee;
    font-size:0;
    position:relative;
    overflow:hidden;
}

.hslide-stage {
    position:absolute;
    white-space:nowrap;
}

.hslide-item {
    display:inline-block;
    background:#ccc;
    box-shadow: inset -1px 0px 0px 0px rgb(255, 255, 255);
    width:500px;
    height:100px;
    font-size:12px;
    text-align:center;
}

.hslide-prev, .hslide-next {
    display:inline-block;
    background:#eee;
    color:#000;
    text-decoration:none;
    padding:10px;
    margin:5px 0;
}
.hslide-prev:hover, .hslide-next:hover {
    background:#ccc;
}
.hslide-prev-disabled, .hslide-next-disabled {
    display:inline-block;
    background:#eee;
    color:#ccc;
    text-decoration:none;
    padding:10px;
    margin:5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div class="hslide">
    <div class="hslide-item">One</div>
    <div class="hslide-item">Two</div>
    <div class="hslide-item">Three</div>
</div>
<a href="#" class="hslide-prev">Previous</a>
<a href="#" class="hslide-next">Next</a>

Answer 1

http://jsfiddle.net/f00dmonsta/qstz570a/1/

.hslide-stage也需要width: 100%