HTML CSS最小寬度流體寬度

Question

無論如何，我可以設置CSS樣式以使jsfiddle示例包含可變寬度嗎？

http://jsfiddle.net/x2qk7/99/

$(document).ready(function(){

$('a.next').click(function(){  
    $('.slide').animate({"left": "-=480"}, 500);
})
$('a.back').click(function(){  
    $('.slide').animate({"left": "+=480"}, 500);
})

});​

.form-slides {width:480px; overflow:hidden; border: 1px solid #ccc;}
.wrap { width: 9999px; }
.slide {width:480px; float:left; position: relative; background:#eee;}
.next {float:right;}

<div class="form-slides">
<div class="wrap">

    <div class="slide">
        <p>Lipsum blah blah blah</p>
        <a href="#" class="next">Next</a> 
    </div>
    <div class="slide">
        <p>Lipsum blah blah blah</p>
        <a href="#" class="next">Next</a> 
        <a href="#" class="back">back</a> 
    </div>
    <div class="slide">
        <p>Lipsum blah blah blah</p>
        <a href="#" class="back">back</a> 
    </div>

</div>

Answer 1

是。 將width:480px替換為width: 100% ，然后將邊框聲明移至.wrap div：

.form-slides { width:100%; }
.wrap { border: 1px solid #ccc; }
.slide { width:100%; float:left; background:#eee; }
.next { float:right; }

Answer 2

容器為流體寬度。 幻燈片是父級寬度的100％。 動畫為-（slideId * 100）％，請參見此處的示例： http ：//psofe.com/mhealth/

示例包含一個帶有流體寬度（使用此方法）和最大寬度的幻燈片。