您的位置:首页 > Web前端 > CSS

处理div+css布局左右浮动问题

2016-08-19 00:00 253 查看
在这里分享下如何处理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;}

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





扫一扫上方二维码关注我们,可获得更多资讯!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息