三步教你学会用浮动float制作div网页，div制作网页分三列怎么做

三步教你学会用浮动float制作div网页，div制作网页分三列怎么做riW

riW
很多人问我怎么利用浮动float，浮动div的时候，很多人说会跑到其他div的上边去，怎么处理。其实很多人习惯了表格，不过现在表格的网友确实过时了，div制作网页才是潮流，除非特殊需要很多表格的地方，一般还是建议大家用div制作网页，怎么用div制作三列网友呢，需要用到浮动float，每当我们用float的时候，伴随着就要用到，clear这个属性，在浮动的下边要把浮动清楚，这样浮动才不会跑到其他div的上边去。riW

riW
先看效果图
riW
riW

riW
可以用个div制作，第一个div是左浮动,第二个div也是左浮动，第三个div是右浮动，第四个div很关键，就是清楚浮动，这样。浮动的div才不会跑到其他父div的上边。可以设置左边的div的占比，中间div的占比，和右边的div占比，可以用百分数表示。这样就制成了三列的网页。riW

riW
来看看原始代码。可以直接使用：riW

riW
<div style="border:#000 solid 1px; padding:10px; width:500px">riW
  <div style="float:left; width:30%; border:#000 solid 1px; margin:5px; height:300px; background:#9C0; padding:5px;">这里是左半部分</div>riW
  <div style="border:#000 solid 1px; float:left;margin:5px;height:300px; background:#F30; width:26%;padding:5px;">这里是中间部分这里是中间部这里是中间部这里是中间部</div>riW
  <div style="float:right; width:30%; border:#000 solid 1px;margin:5px; height:300px; background:#099;padding:5px;">这里是右半部分</div>riW
  <div style="clear:both"></div>riW
</div>riW

三步教你学会用浮动float制作div网页，div制作网页分三列怎么做

http://m.gsyjwlkj.com/meiwen/3272.html

推荐访问