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/

示例有一个具有流体宽度的幻灯片（使用此方法）和最大宽度。