html - 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>

</p>

Answer 1

はい。に置き換えwidth:480pxてwidth: 100%、border 宣言を.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/

例には、可変幅 (このメソッドを使用) と最大幅のスライドショーがあります。