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

css|浮动|技巧|解决|设计|网页|问题

前我最常用的方法有两种:

方法一:

使用块级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布局时就不会有那以多的苦恼了

时间: 2024-10-30 10:56:07

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

DIV CSS制作网页时浮动问题的解决方法

css|浮动|解决|网页|问题 前最常用的方法有两种︰ 方法一.使用块级clear,即声明一个块的类属性为 .clear {clear:both;} 方法二.使用内联元素清理,比如说在主浮动内容后跟一个内联元素. .inlineclear {clear:both;}<span class="inlineclear"></span> 方法三,使用双层div巢状 #pubpage {display:block;clear:both;}#main {display:b

DIV+CSS设计网页时的常见错误处理技巧

以下是一些DIV+CSS设计网页时的常见错误处理技巧,希望能对大家有所帮助. 1. 检查HTML元素是否有拼写错误.是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误. 2. 检查CSS是否正确 检查一下有无拼写错误.是否忘记结尾的 } 等.可以利用CleanCSS来检查 CSS的拼写错误.CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误. 3. 确定错误发生的位置 假如错误影响了整体布局,则可以逐个删除div块,直到删除

用DIV CSS设计网页时的八个必要的小技巧

css|技巧|设计|网页 以下是进行CSS设计时的八个必要的小技巧,良好的习惯可能会使你的设计周期加倍缩短.(如果您想了解更多请参见人民邮电出版社后续图书<CSS精粹--101条设计技巧>) 1.若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题.W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org 请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误:我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减

三星N7102/SCH-N719浏览网页时不显示图片解决方法

请按照以下步骤操作: 1.在待机页面下,点击[应用程序]. 2.选择[互联网]. 3.打开互联网后,点击左下方[菜单]键,选择[设定]. 4.点击[带宽管理]. 5.将[载入图像]打钩.     以上操作后,当您再次浏览网页时,图片就可以正常显示了. 注:如果您使用第三方浏览器上网,图片显示选项请查看第三方软件相关设置.

Div+CSS设计网站利于优化

网页制作Webjx文章简介:您所在的位置:首页 网页设计 HTML/CSS/DIV Div+CSS设计网站的优点 Div+CSS设计网站的优点 2008-03-18 作者: 来源:网络 [大 中 您所在的位置:首页 > 网页设计 > HTML/CSS/DIV > Div+CSS设计网站的优点 Div+CSS设计网站的优点 2008-03-18 作者: 来源:网络 [大 中 小] 评论:0 软件: 网页设计行业从业者越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人

DIV+CSS建设网页简单的6个步骤

网页制作Webjx文章简介:DIV+CSS建设网页简单的6个步骤. 大家都知道用DIV+CSS的布局来设计网站便于优化,容易被收录,比如两个网站同时上线,拥有同样的外链,推广2个月后,保证使用DIV+CSS布局的站点获得的排名比传统的TABLE 要好,用DIV+CSS建设该网站首先是从整体布局入手,构思好网站的整体布局结构,一般我们按以下步骤来建设一个网站的页面: 1.顶部部分,其中包括了LOGO.MENU和一幅Banner图片: 2.页面中间部分,那就是我们的主体了,这里就以我们为一客户做的站

使用Div+CSS进行网页的多列布局

这几天我在用Div+CSS进行网页三列布局的时候突然想到的这样一个方法,这个想法自己都觉得有些疯狂,如果其中有什么不对的地方还是请各位多多指教. 当您需要写一个三列布局的时候,一般情况下我会选择使用如下的DIV布局方式: 使用这样的嵌套方式无疑可以使代码出错的概率减少很多,但同时这样的布局也略显复杂,对于后期的维护也略显不便.我们在布局导航时经常会使用到一个方法,那就是使用 列表来进行布局,而导航可以形容为多列式的布局,既然如此,那么我们也就可以使用来进行页面的多列布局.

div布局-DIV + CSS设计中的DIV是指的html中的div标签吗?

问题描述 DIV + CSS设计中的DIV是指的html中的div标签吗? 在DIV+CSS设计中的DIV如果是div标签的话, 那么DIV+CSS的意思就是换行标签与层叠样式表. 这个意思好像有些别扭. 解决方案 DIV+CSS是WEB设计标准,它是一种网页的布局方法.不是指页面的div标签的. 参考:http://baike.baidu.com/link?url=lf2dUBDDlOdMJHnoAr-bUvWbZQ_JBgQr8z__vWe3mUr5XesIP_2Gf65cXxgENgzCS

CSS设计指南之浮动与清除

原文:CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计float属性的主要目的,是为了实现文本绕排图片的效果.然而,这个属性也成为了创建多栏布局最简单的方式. 1.文本绕排图片 在浮动一张图片或其他元素时,你是在要求浏览器把它往上方推,直到它碰到父元素的内边界.后面的段落不再认为浮动元素在文档流中位于它的前面了,因为它会占据父元素左上角的位置.不过,它