不用float实现模块居中布局

最常见实用的布局形式：上、中左、中右、底四个模块，宽度760px，整体页面居中。

结构代码，top left right foot 四个模块全部独立、互不嵌套。

＜div id="top"＞head＜/div＞

＜div id="left"＞
  ＜div id="left_module"＞left＜/div＞
＜/div＞

＜div id="right"＞
  ＜div id="right_module"＞right＜/div＞
＜/div＞

＜div id="foot" ＞foot＜/div＞

顶部属于常规定义。

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

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

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

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

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

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

#right { width:760px; margin:auto; background:#E8E8E8;}
  #right_module { width:440px; background:#F0F0F0; height:360px; margin:0 0 0 auto; padding:10px;}

底部也属于常规定义。

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

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

赞 (0)

相关推荐

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

    不用float实现模块居中布局

    最常见实用的布局形式:上.中左.中右.底四个模块,宽度760px,整体页面居中. 结构代码,top left right foot 四个模块全部独立.互不嵌套. <div id="top">head</div> <div id="left">  <div id="left_module">left</div></div> <div id="right"

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

    最常见的div+css网页布局形式:上.中左.中右.底四个模块,宽度760px,整体页面居中. 结构代码,top left right foot 四个模块全部独立.互不嵌套. <div id="top">head</div> <div id="left">   <div id="left_module">left</div> </div> <div id="r

  • zend framework多模块多布局配置

    许多人在使用过程中都会遇到这样那样的问题,而且zend framework现在已经到1.11版本了,网络上的很多资料都还停留在旧版本上,因此我在这里以当前的最新版本1.11为例,来简单介绍一下如何使用zend framework创建模块化的应用程序.由于今后框架的版本升级,有些内容可能会过时,请及时参阅最新的使用手册. 1.准备工作 首先假设你已经部署了web服务器和php,并下载了zend framework的最新版本,创建了一个最原始的zend framework项目,并可以访问默认的act

  • 关于居中布局和IE双倍边距bug

    今天google了一下css居中布局的问题,结果差不多都是引用了同一篇文章.在ie中要居中,只要在<body>元素中定义text-align:center;的属性.而在firefox中,需要定义一个wrapper包裹器.然后指定margin-left:auto;margin-right:auto;的属性来使区块在firefox中居中.其实,我自己都是用margin:auto;的缩写margin属性来设定居中.margin缩写属性是上.右.下.左的顺时针顺序来设定四个方位的页面边距的.需要注意的

  • Android App中使用LinearLayout进行居中布局的实例讲解

    Android App中使用LinearLayout进行居中布局的实例讲解

    要想让您的控件水平居中或垂直居中其实很简单,只要在控件的上一级中设置[android:gravity="center"]属性即可 如: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:gravity="center" android:backgro

  • 移动端android上line-height不居中的问题的解决

    移动端android上line-height不居中的问题的解决

    现在越来越多的移动界面使用rem适配,遇到的坑也不尽其数,今天就移动端android上line-height不居中的问题提出自己的解决办法. 据分析得知原因: 1.字体大小不要使用奇数字号,带小数点的更不要提了.也就是说被2整除的整数且不可小于12px. 2.使用rem的单位时造成(根元素如果动态改变时,根元素字体可能不是整数). 那么,怎么解决了? 网上有好几种,如 1.把字号内外边距等设置为需求大小的2倍,使用transform进行缩放.只能针对 单个或者是一排的布局进行缩放,如果是父级自适

  • python进阶教程之模块（module）介绍

    我们之前看到了函数和对象.从本质上来说,它们都是为了更好的组织已经有的程序,以方便重复利用. 模块(module)也是为了同样的目的.在Python中,一个.py文件就构成一个模块.通过模块,你可以调用其它文件中的程序. 引入模块 我们先写一个first.py文件,内容如下: 复制代码 代码如下: def laugh():     print 'HaHaHaHa' 再写一个second.py,并引入first中的程序: 复制代码 代码如下: import first for i in range

  • CSS网页布局入门教程4：二列固定宽度

    CSS网页布局入门教程4：二列固定宽度

    有了一列固定宽度作为基础,二列固定宽度就非常简单,我们知道div用于对某一个区域的标识,而二列的布局,自然需要用到两个div,XHTML代码如下: 复制代码 代码如下: <div id="left">左列</div>  <div id="right">右列</div> 新的代码结构中使用了两个id,分别为left和right,表示两个div的名称,我们所需要做的是,首先为它们制定宽度,然后让两个div在水平行中并排显示

  • python中模块导入模式详解

    python中模块导入模式详解

    目录 模块导入 1.1 import导入模块 1.2 from 模块名 import 导入模板的方法 1.3 as 关键字 OS模块操作文件 OS模块的作用 模块的制作.发布.安装 3.1 模块制作 3.2 模块的分 3.3 示例 3.4 测试方法 3.5 all魔术方法 模块导入 1.1 import导入模块 所谓的模块其实就是一个外部的工具包,其中存在的其实就是Python文件,这些文件都实现了某种特定的功能,我们导入包之后直接使用即可,非常的方便. 在开发中使用最多的就是使用: impor

  • 基于Node.js + WebSocket打造即时聊天程序嗨聊

    基于Node.js + WebSocket打造即时聊天程序嗨聊

    前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前后端之间代码敲得飞起,从此由前端晋升为'前后端'. 本文将使用Node.js加web socket协议打造一个网页即时聊天程序,取名为HiChat,中文翻过来就是'嗨聊',听中文名有点像是专为寂寞单身男女打造的~ 其中将会使用到express和socket.io两个包模块,下面会有介绍. 源码 源码

随机推荐