网站地图    收藏   

主页 > 前端 > css教程 >

如何处理div+css布局左右浮动问题 - html/css语言栏

来源:自学PHP网    时间:2015-04-14 14:50 作者: 阅读:

[导读] 上次分享了《DIV+CSS网页设计制作页面布局技巧分享!》,相信我们对网页布局技巧方面已经有所了解,其实在我们进行div+css网页布局时,还会出现css布局左右出现浮动的问题。这里就在...

上次分享了《DIV+CSS网页设计制作页面布局技巧分享!》,相信我们对网页布局技巧方面已经有所了解,其实在我们进行div+css网页布局时,还会出现css布局左右出现浮动的问题。这里就在分享下如何处理div+css布局左右浮动问题。
  先看以下代码片段:
  css代码:
 
 #left{ float:left;width:200px;}
  #right{ float:right;width:800px;}

 

  页面代码:
  <body>
  <div id="content">
   <div id="left">左边一栏</div>
   <div id="right">右边一栏</div>
  </div>
  </body>
   这是我们css书写使用最常用的代码来进行左右布局。css的书写还有其它的方式,如左侧固定好宽度右侧自动适应。
  左侧固定好宽度右侧自动适应css代码:
  #left{float:left; width:200px;}
  #right{margin-left:200px;}
  #left{float:left; width:200px;}
  #right{margin-left:200px;}

 

   上面css的书写是最标准的css的书写,如果在以上的基础上书写的css代码而出现了左右浮动的现象,那就需要检查左右侧里面的代码是否书写规范,</div>此div结尾代码是否多写或少写而导致的。我们只需要注意以上情况,基本就可以解决好div+css布局左右浮动问题了。转载请注明:http://www.jnsino.com

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论