不用float也能实现DIV模块居中布局

开发 前端
本文向大家介绍一下不用float如何实现div模块居中布局,最常见的DIV+CSS网页布局形式:上、中左、中右、底四个模块,宽度760px,整体页面居中。

你对div模块居中布局的实现方法是否了解,这里和大家分享一下,相信本文介绍一定会让你有所收获。

不用float实现div模块居中布局

最常见的DIV+CSS网页布局形式:上、中左、中右、底四个模块,宽度760px,整体页面居中。

结构代码,topleftrightfoot四个模块全部独立、互不嵌套。

ExampleSourceCode
 

  1. divid="top">head</div>  
  2.  
  3. divid="left">  
  4. divid="left_module">left</div>  
  5. </div>  
  6.  
  7. divid="right">  
  8. divid="right_module">right</div>  
  9. </div>  
  10.  
  11. divid="foot">foot</div>  
  12.  

 顶部属于常规定义。

  1. #top{height:100px;background:#ccc;width:760px;margin:auto;  
  2. text-align:center;}  
  3.  

◆方法A:

外层left定义为760px宽并居中;内层left_module定义为实际的左侧宽度280px,且绝对定位,top值等于顶部定义的高度。
这种方法的好处是:leftright两个模块代码片断可以互换调整显示优先级。

  1. #left{width:760px;margin:auto;}  
  2. #left_module{width:280px;position:absolute;top:100px;padding:10px;}  
  3.  

◆方法B:

外层left定义为760px宽并居中,相对浮动于top;内层left_module定义为实际的左侧宽度280px,且绝对定位。
这种方法的好处是:顶部的高度可以自由延伸。

  1. #left{width:760px;margin:auto;position:relative;}  
  2. #left_module{width:280px;position:absolute;padding:10px;}  
  3.  

外层right定义为760px宽并居中,内层right_module定义为实际的右侧宽度440px,使用margin语法居左。right_module定义的背景色是实际右侧的背景色,定义的高度就是实际中间模块的高度;right的背景色就是实际左侧的背景色。

  1. #right{width:760px;margin:auto;background:#E8E8E8;}  
  2. #right_module{width:440px;background:#F0F0F0;  
  3. height:360px;margin:000auto;padding:10px;}  
  4.  

◆底部也属于常规定义。

  1. #foot{height:100px;background:#ccc;  
  2. width:760px;margin:auto;text-align:center;}  
  3.  

测试环境IE6.0和FF1.5,都是最俗的语法,非常简单,实用有限,可做技术参考。

文章来源:Div-Css.net设计网参考:http://www.div-css.net/div_css/topic/index.asp?id=7123

【编辑推荐】

  1. Float构建三栏DIV CSS网页布局
  2. IE6.0对padding的解读分析
  3. 揭露CSS中margins折叠现象内幕
  4. 七大CSS选择符用法说明
  5. 技术分享 如何使用CSS控制超链接文字样式
责任编辑:佚名 来源: div-css.net
相关推荐

2010-09-06 09:16:04

floatDIV

2010-09-10 08:54:52

DIV居中

2010-08-16 15:46:16

DIV居中

2022-02-15 08:49:29

继承C++variant

2010-09-09 13:12:54

CSSfloatDIV

2010-08-24 15:45:48

DIVCSSfloat

2010-08-25 12:47:40

DIVCSS

2010-09-10 13:58:38

DIV图片居中

2010-08-16 16:39:48

DIV内容居中

2010-08-16 14:42:15

DIV

2010-08-16 16:07:30

DIV垂直居中

2010-08-24 10:11:26

DIV标签

2010-08-23 14:06:57

DIV+CSS

2010-09-07 10:56:58

SQL语句

2010-09-09 10:15:35

DIVCSS

2010-09-14 17:07:26

DIV浮动定位CSS

2010-09-02 13:03:38

CSS垂直居中

2010-08-17 13:08:31

DIV+CSS布局

2010-08-24 14:23:39

DIV居中

2021-12-27 07:45:30

CSS 技巧烟雾效果
点赞
收藏

51CTO技术栈公众号