用div做的走勢圖,高度根據(jù)動態(tài)變化的數(shù)據(jù)改變,有三種效果:從上到下、從左到右、從下到上。
從上到下
<style> div{float:left;margin-right:2px;width:10px;background:#f00;} </style> <div style="height:100px"></div> <div style="height:200px"></div> <div style="height:300px"></div> <div style="height:500px"></div> <div style="height:200px"></div>
從左到右
<style> div{clear:both;margin-bottom:2px;height:10px;background:royalblue;} </style> <div style="width:100px"></div> <div style="width:200px"></div> <div style="width:300px"></div> <div style="width:500px"></div> <div style="width:200px"></div>
從下到上
<style> #wrap {position:relative;width:500px;height:600px;} #wrap div{width:15px;position:absolute;bottom:5px;background:#f00;} </style> <div id="wrap"> <div style="height:100px;left:10px"></div> <div style="height:200px;left:30px"></div> <div style="height:300px;left:50px"></div> <div style="height:500px;left:70px"></div> <div style="height:200px;left:90px"></div> </div>