html - HTML CSS min-width 流体宽度

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>

​</p>

Answer 1

是的。替换width:480px为width: 100%，并将边界声明移动到.wrapdiv：

.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/

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