注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

(power up)

道可道,非常道。

 
 
 

日志

 
 
 
 

关于清除div浮动  

2011-04-21 11:47:12|  分类: W3C |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<style type="text/css">
.d1{ width:100%; border:1px solid red;}
.d2{ float:left; width:30%; height:20px; border:1px solid blue;}

</style>
<body >

<div class="d1 clearfix">
    <div class="d2">彩色</div>
    <div class="d2">出色</div>
</div>

如想外部div容器自适应高度,被里面的容器撑开;在遇到里面的容器float时,则外部不能有效地撑开。

之前的做法即在里面的容器下面加上<div style="clear:both"></div>清除浮动即可,但这回多出一个没有实际意义的div容器。


加一段样式:

.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix{ display:inline-block; }
*html .clearfix{ height:1%; }

 应用ok。

  评论这张
 
阅读(169)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017