解决div+css布局左右浮动问题

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


今天因为左右div对齐的问题纠结一上午,最后发现HTML中对div的定义一定要和在CSS中样式的定义一样。也就是CSS对大小写十分敏感。保证HTML中的id=“xxx”和#xxx一致,这样才能使样式完全显示出来,发现隐藏的错误。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值