职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 3114|回复: 0

技巧:div+css设计网页时浮动问题的解决方法

[复制链接]
孤风月影 发表于 2007-8-20 09:32 | 显示全部楼层 |阅读模式
前我最常用的方法有两种:

方法一:

使用块级clear,即声明一个块的类属性为.clear {clear:both;}

方法二:

使用内联元素清理,比如说在主浮动内容后跟一个内联元素。

.inlineclear {clear:both;}
<span class=\"inlineclear\"></span>

方法三:使用双层div嵌套

#pubpage {display:block;clear:both;}
#main {display:block;float:left;}
<div id=\"pubpage\">
<div id=\"main\">
内容
</div>
</div>

这样用的话,内部的main就会把浮动给撑起来

方法四:

/******clear float*******/
.clearfix:after {
content: \".\";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

加在一个想表示成块的容器的类属性上,但此属性必须为第一个,如<div class=\"clearfix votelist\" id=\"votelist\">


第四种方法目前可以很好的兼容多种浏览器,并且不要加额外的元素就可以完成想要的布局,原文请看这里 http://www.positioniseverything.net/easyclearing.html

有了以上这几种方法,你在用div+css布局时就不会有那以多的苦恼了
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-5-16 00:03 , Processed in 0.143772 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表