不用float实现模块居中布局_CSS/HTML

最常见实用的布局形式:上、中左、中右、底四个模块,宽度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,都是最俗的语法,非常简单,实用有限,可做技术参考。

 

时间: 2024-10-26 13:18:35

不用float实现模块居中布局_CSS/HTML的相关文章

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

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

不用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

zend framework多模块多布局配置_php技巧

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

关于居中布局和IE双倍边距bug_CSS/HTML

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

典型的三行二列居中高度自适应布局_CSS/HTML

如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) 首先先按这里看实际运行效果,这个页面在mozilla.opera和IE浏览器中均可以实现居中和高度自适应.我们来分析代码: 完整代码 <html><head><style type="text/css">body{background:#999;tex

CSS3网格布局模块:网格布局实现网页布局

文章简介:CSS3网格布局模块的一个任务是帮助我们处理非常简单和清晰的任何web-imposer(不仅),很有可能是一个内容块在一个虚拟的网络位置. 前言 在我看来,CSS3模块家族中,CSS3网格布局模块是最有趣的一个.W3C官网自发布草案到今天不到一年时间.有一点必须注意,早在2007年 宣布的WD版本中,有些名称和语法有一些变化,但是他们具有相同的本质.今天模块正在前速向前,在IE10中已经初步实现,希望新的特性在将来能得到支持以及其他流行浏览器也将支持这个模块. 为什么我们需要网格布局?

重构、标准、布局_CSS/HTML

近来大家总是在标准上争论不休,其实,这些问题一些相关文章已经说得很明白了. 以下我就谈谈我的看法.本帖子有太多的"我认为",说明了我只是想把我的想法拿出来跟大家商榷,或许有太多不对的地方,也请大家一一指出. 1.我对web标准的理解 所谓的web标准,在一些教程文章上已经得到结论:结构化标准(XHTML.XML).表现标准(CSS.XSLT?).行为标准(DOM.ECMAScript).这些东西在网上一搜一大把,在这里我就不多说了.我只说我自己的想法: a.标准是相对的,有其一定的局限